var Component=(()=>{var F=Object.create;var e=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var o=(h,s)=>()=>(s||h((s={exports:{}}).exports,s),s.exports),m=(h,s)=>{for(var l in s)e(h,l,{get:s[l],enumerable:!0})},t=(h,s,l,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of g(s))!E.call(h,n)&&n!==l&&e(h,n,{get:()=>s[n],enumerable:!(a=p(s,n))||a.enumerable});return h};var D=(h,s,l)=>(l=h!=null?F(y(h)):{},t(s||!h||!h.__esModule?e(l,"default",{value:h,enumerable:!0}):l,h)),A=h=>t(e({},"__esModule",{value:!0}),h);var r=o((N,k)=>{k.exports=_jsx_runtime});var C={};m(C,{default:()=>c});var i=D(r());function d(h){let s={a:"a",br:"br",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...h.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(s.h2,{id:"introduction",children:"Introduction"}),` `,(0,i.jsx)(s.p,{children:"Building a blog with Next.js and MDX has become increasingly popular among developers who want to combine the power of React components with the simplicity of Markdown. In this tutorial, I'll walk you through creating a fully-functional blog from scratch."}),` `,(0,i.jsx)(s.h3,{id:"what-youll-need",children:"What You'll Need"}),` `,(0,i.jsx)(s.p,{children:"Here are the essential packages we'll be working with:"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Next.js"})," - The React framework for production"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Content Collections"})," - For managing and validating MDX content"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Shiki"})," - Syntax highlighting for code blocks"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Rehype/Remark plugins"})," - To enhance markdown processing"]}),` `]}),` `,(0,i.jsx)(s.h2,{id:"why-mdx-for-blogging",children:"Why MDX for Blogging?"}),` `,(0,i.jsx)(s.p,{children:"MDX allows you to write JSX directly in your markdown files, giving you the flexibility to:"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsx)(s.li,{children:"Embed interactive React components within blog posts"}),` `,(0,i.jsx)(s.li,{children:"Create reusable content blocks"}),` `,(0,i.jsx)(s.li,{children:"Maintain type-safe frontmatter with validation"}),` `,(0,i.jsx)(s.li,{children:"Generate static pages at build time for optimal performance"}),` `]}),` `,(0,i.jsx)(s.h2,{id:"setting-up-your-project",children:"Setting Up Your Project"}),` `,(0,i.jsx)(s.p,{children:"Let's start by creating a new Next.js project with TypeScript support:"}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0",title:"Terminal","data-lang":"bash",children:(0,i.jsxs)(s.code,{children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"pnpm"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" create"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" next-app@latest"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" my-blog"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" --typescript"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" --tailwind"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" --app"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:"cd"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" my-blog"})]})]})})}),` `,(0,i.jsx)(s.h3,{id:"installing-dependencies",children:"Installing Dependencies"}),` `,(0,i.jsx)(s.p,{children:"We'll need a few additional packages to handle MDX content:"}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0",title:"Terminal","data-lang":"bash",children:(0,i.jsxs)(s.code,{children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"pnpm"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" add"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" @content-collections/core"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" @content-collections/mdx"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"pnpm"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" add"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" -D"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" @content-collections/next"})]})]})})}),` `,(0,i.jsx)(s.h3,{id:"project-structure",children:"Project Structure"}),` `,(0,i.jsx)(s.p,{children:"Here's the recommended folder structure for your blog:"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"app/"})," - Next.js App Router pages"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"content/blog/"})," - Your MDX blog posts"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"components/mdx/"})," - Custom MDX components"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.code,{children:"content-collections.ts"})," - Content schema definition"]}),` `]}),` `,(0,i.jsx)(s.h2,{id:"defining-your-content-schema",children:"Defining Your Content Schema"}),` `,(0,i.jsxs)(s.p,{children:["Create a ",(0,i.jsx)(s.code,{children:"content-collections.ts"})," file in your project root to define the structure of your blog posts:"]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0",title:"content-collections.ts","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { defineCollection, defineConfig } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" '@content-collections/core'"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { compileMDX } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" '@content-collections/mdx'"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" posts"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" defineCollection"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"({"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" name: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'posts'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:","})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" directory: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'content/blog'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:","})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" include: "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'*.mdx'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:","})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" schema"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"z"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ({"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" title: z."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(),"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" date: z."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(),"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" summary: z."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(),"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" modifiedTime: z."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"()."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"optional"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(),"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }),"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" transform"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"async"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"document"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"context"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" mdx"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" await"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" compileMDX"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(context, document)"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" "})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ..."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"document,"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" slug: document._meta.path,"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" content: mdx,"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" },"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"})"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" defineConfig"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"({"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" collections: [posts]"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:","})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"})"})})]})})}),` `,(0,i.jsx)(s.p,{children:"This configuration provides:"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Type safety"})," for your frontmatter"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Automatic validation"})," of blog post metadata"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"MDX compilation"})," at build time"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Slug generation"})," from file paths"]}),` `]}),` `,(0,i.jsx)(s.h2,{id:"creating-your-first-blog-post",children:"Creating Your First Blog Post"}),` `,(0,i.jsxs)(s.p,{children:["Now let's create a sample blog post. Create a new file at ",(0,i.jsx)(s.code,{children:"content/blog/hello-world.mdx"}),":"]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0",title:"content/blog/hello-world.mdx","data-lang":"mdx",children:(0,i.jsxs)(s.code,{children:[(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"---"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#7EE787"},children:"title"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"Hello World - My First Blog Post"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#7EE787"},children:"date"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'2024-01-15T00:00:00Z'"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#7EE787"},children:"summary"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"Welcome to my new blog built with Next.js and MDX!"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"---"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-light-font-weight":"bold","--shiki-dark":"#79C0FF","--shiki-dark-font-weight":"bold"},children:"## Welcome!"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"This is my first blog post using "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"**"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"Next.js"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"**"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" and "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"**"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"MDX"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"**"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:". "})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-light-font-weight":"bold","--shiki-dark":"#79C0FF","--shiki-dark-font-weight":"bold"},children:"### What I Can Do"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"With MDX, I can:"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"1"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" Write regular markdown"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"2"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" Use React components"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"3"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" Create interactive content"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"Pretty cool, right?"})})]})})}),` `,(0,i.jsx)(s.h2,{id:"building-the-blog-list-page",children:"Building the Blog List Page"}),` `,(0,i.jsxs)(s.p,{children:["Create your blog listing page at ",(0,i.jsx)(s.code,{children:"app/blog/page.tsx"}),":"]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0",title:"app/blog/page.tsx","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { allPosts } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'content-collections'"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" Link "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'next/link'"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" BlogPage"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"() "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // Sort posts by date (newest first)"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" sortedPosts"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" allPosts."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"sort"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"a"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:", "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"b"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" "})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" new"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" Date"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(b.date)."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"getTime"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"() "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"-"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" new"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" Date"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(a.date)."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"getTime"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"()"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" )"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"div className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'mx-auto max-w-4xl px-4 py-12'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"h1 className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'mb-8 text-4xl font-bold'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"Blog Posts"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" "})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"div className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'space-y-6'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"sortedPosts"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"map"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"post"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"article"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" "})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" key"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{post.slug}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'rounded-lg border p-6 transition-shadow hover:shadow-lg'"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" >"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"Link href"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"`/blog/${"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"post"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"slug"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"}`"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"h2 className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'mb-2 text-2xl font-semibold'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"post"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"title"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"time className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'text-sm text-gray-600'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"new"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" Date"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"post"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"date"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:")."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"toLocaleDateString"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"('"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"en"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"-"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"US"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"', {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" year"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'numeric'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:","})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" month"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'long'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:","})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" day"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'numeric'"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" })}"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"p className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'mt-3 text-gray-700'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{post.summary}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ))}"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" )"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})})]})})}),` `,(0,i.jsx)(s.h2,{id:"creating-the-blog-post-page",children:"Creating the Blog Post Page"}),` `,(0,i.jsxs)(s.p,{children:["Now create the dynamic route for individual posts at ",(0,i.jsx)(s.code,{children:"app/blog/[slug]/page.tsx"}),":"]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0",title:"app/blog/[slug]/page.tsx","data-lang":"typescript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { allPosts } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'content-collections'"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { notFound } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" 'next/navigation'"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { MDXContent } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" '@content-collections/mdx/react'"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" generateStaticParams"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"() {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" allPosts."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"map"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"post"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ({"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" slug: post.slug,"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }))"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" function"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" BlogPostPage"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"({ "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" params "})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" { "})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" params"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" { slug"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:":"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" string"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" } "})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"}) "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" post"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" allPosts."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:"find"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"(("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"p"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:") "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"=>"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" p.slug "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"==="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" params.slug)"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" "})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" if"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"!"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"post) {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" notFound"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"()"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" }"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" return"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" ("})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"article className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'mx-auto max-w-3xl px-4 py-12'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"header className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'mb-8'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"h1 className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'mb-4 text-4xl font-bold'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{post.title}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:""})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"time className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'text-gray-600'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"new"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" Date"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"post"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"date"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:")."}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"toLocaleDateString"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"('"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"en"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"-"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"US"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"', {"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" year"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'numeric'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:","})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" month"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'long'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:","})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" day"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:": "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'numeric'"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" })}"})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" "})}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"div className"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:"'prose prose-lg max-w-none'"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:">"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" <"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"MDXContent code"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"{post.content} "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"/>"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" "})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" )"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})})]})})}),` `,(0,i.jsx)(s.h2,{id:"next-configuration",children:"Next Configuration"}),` `,(0,i.jsxs)(s.p,{children:["Update your ",(0,i.jsx)(s.code,{children:"next.config.js"})," to enable Content Collections:"]}),` `,(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(s.pre,{className:"shiki shiki-themes github-light-default github-dark-default",style:{"--shiki-light":"#1f2328","--shiki-dark":"#e6edf3","--shiki-light-bg":"#ffffff","--shiki-dark-bg":"#0d1117"},tabIndex:"0",title:"next.config.js","data-lang":"javascript",children:(0,i.jsxs)(s.code,{children:[(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"import"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" { withContentCollections } "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"from"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#A5D6FF"},children:" '@content-collections/next'"})]}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:"/** "}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"@type"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:" {import('next').NextConfig}"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" */"})]}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"const"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#79C0FF"},children:" nextConfig"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" ="}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:" {"})]}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#8B949E"},children:" // Your Next.js config"})}),` `,(0,i.jsx)(s.span,{className:"line",children:(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"}"})}),` `,(0,i.jsx)(s.span,{className:"line"}),` `,(0,i.jsxs)(s.span,{className:"line",children:[(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:"export"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#FF7B72"},children:" default"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#D2A8FF"},children:" withContentCollections"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:"("}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#E6EDF3"},children:"nextConfig"}),(0,i.jsx)(s.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#FFA657"},children:")"})]})]})})}),` `,(0,i.jsx)(s.h2,{id:"thats-it",children:"That's It!"}),` `,(0,i.jsx)(s.p,{children:"You now have a fully functional blog with:"}),` `,(0,i.jsxs)(s.p,{children:["\u2705 Type-safe content management",(0,i.jsx)(s.br,{}),` `,"\u2705 MDX support for rich content",(0,i.jsx)(s.br,{}),` `,"\u2705 Automatic routing",(0,i.jsx)(s.br,{}),` `,"\u2705 Static generation for optimal performance"]}),` `,(0,i.jsx)(s.h2,{id:"additional-enhancements",children:"Additional Enhancements"}),` `,(0,i.jsx)(s.p,{children:"Want to take your blog further? Consider adding:"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Code syntax highlighting"})," with Shiki or Prism"]}),` `,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.strong,{children:"Reading time estimates"})}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Table of contents"})," generation"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Related posts"})," suggestions"]}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"RSS feed"})," for subscribers"]}),` `,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.strong,{children:"Search functionality"})}),` `,(0,i.jsxs)(s.li,{children:[(0,i.jsx)(s.strong,{children:"Tags and categories"})," for organization"]}),` `]}),` `,(0,i.jsx)(s.h2,{id:"useful-resources",children:"Useful Resources"}),` `,(0,i.jsxs)(s.ul,{children:[` `,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://nextjs.org/docs",children:"Next.js Documentation"})}),` `,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://www.content-collections.dev",children:"Content Collections Guide"})}),` `,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://mdxjs.com/",children:"MDX Official Site"})}),` `,(0,i.jsx)(s.li,{children:(0,i.jsx)(s.a,{href:"https://tailwindcss.com/docs",children:"Tailwind CSS"})}),` `]})]})}function c(h={}){let{wrapper:s}=h.components||{};return s?(0,i.jsx)(s,{...h,children:(0,i.jsx)(d,{...h})}):d(h)}return A(C);})(); ;return Component;

Blog

Thoughts, tutorials, and insights about web development and technology.

Welcome to My Journey - A Developer's Story

How to build a blog with Next.js and MDX