var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),g=(a,e)=>{for(var s in e)t(a,s,{get:e[s],enumerable:!0})},i=(a,e,s,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of N(e))!k.call(a,c)&&c!==s&&t(a,c,{get:()=>e[c],enumerable:!(l=m(e,c))||l.enumerable});return a};var f=(a,e,s)=>(s=a!=null?h(u(a)):{},i(e||!a||!a.__esModule?t(s,"default",{value:a,enumerable:!0}):s,a)),w=a=>i(t({},"__esModule",{value:!0}),a);var p=y((S,r)=>{r.exports=_jsx_runtime});var j={};g(j,{default:()=>v,frontmatter:()=>b});var n=f(p()),b={title:"Build a Simple Blog with Contentlayer, Next.js and Tailwind CSS",summary:"Building your own blog should not be complicated. This article shows you how to build a simple blog using contentlayer, Next.js, markdown and Tailwind CSS.",publishedAt:"2022-07-22",image:"contentlayer-in-nextjs/banner-light.png",imageW:2048,imageH:1170,tags:["next","markdown","contentlayer","tailwindcss"]};function d(a){let e=Object.assign({h2:"h2",a:"a",span:"span",p:"p",ul:"ul",li:"li",pre:"pre",code:"code",h3:"h3",div:"div",h4:"h4",ol:"ol"},a.components),{Callout:s,ExternalLink:l,Image:c}=e;return s||o("Callout",!0),l||o("ExternalLink",!0),c||o("Image",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.h2,{id:"what-is-contentlayer",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#what-is-contentlayer",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"What is Contentlayer?"]}),` `,(0,n.jsx)(e.p,{children:"Contentlayer is a content SDK that validates and transforms your Markdown, MD(X) and CMS content into type-safe JSON data you can easily import into your application."}),` `,(0,n.jsx)(s,{emoji:"\u26A0\uFE0F",children:(0,n.jsx)(e.p,{children:`Contentlayer is still in Beta. There might still be breaking changes before the upcoming version 1.0 release!`})}),` `,(0,n.jsx)(e.p,{children:"It includes the following features & benefits:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Live reloading on content changes"}),` `,(0,n.jsx)(e.li,{children:"Blazing fast build & page performance"}),` `,(0,n.jsx)(e.li,{children:"Simple but powerful schema DSL (Domain Specific Language) to design your content model (validates your content and generates types)"}),` `,(0,n.jsx)(e.li,{children:"Auto-generated TypeScript types based on your content model (e.g. frontmatter or CMS schema)"}),` `,(0,n.jsx)(e.li,{children:"Lightweight & easy to use"}),` `,(0,n.jsx)(e.li,{children:"Great developer experience"}),` `]}),` `,(0,n.jsxs)(e.h2,{id:"automatic-installation--configuration",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#automatic-installation--configuration",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Automatic Installation & Configuration"]}),` `,(0,n.jsxs)(e.p,{children:["The easiest way to configure a new Next.js project with Contentlayer is by using a starter project from the official ",(0,n.jsx)(e.a,{href:"https://github.com/vercel/next.js/tree/canary/examples/with-contentlayer",children:"Next.js examples directory"}),"."]}),` `,(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsxs)(e.code,{className:"language-bash code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`npx create-next-app -e with-contentlayer contentlayer-app `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"# or"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"yarn"}),` create next-app -e with-contentlayer contentlayer-app `]})]})}),` `,(0,n.jsx)(e.p,{children:"After the installation is complete:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Navigate into the project folder ",(0,n.jsx)(e.code,{children:"cd contentlayer-app"})]}),` `,(0,n.jsxs)(e.li,{children:["Run ",(0,n.jsx)(e.code,{children:"npm run dev"})," or ",(0,n.jsx)(e.code,{children:"yarn dev"})," to start the next dev server on ",(0,n.jsx)(e.code,{children:"localhost:3000"}),"."]}),` `,(0,n.jsxs)(e.li,{children:["Visit ",(0,n.jsx)(e.code,{children:"localhost:3000"})," on your browser to view your application"]}),` `]}),` `,(0,n.jsxs)(e.h2,{id:"manual-installation--configuration",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#manual-installation--configuration",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Manual Installation & Configuration"]}),` `,(0,n.jsx)(e.p,{children:"Let's start with a blank Next.js project with TypeScript. Contentlayer works better with TypeScript as recommended by the development team. We'll use that in our example below."}),` `,(0,n.jsxs)(e.h3,{id:"new-nextjs-with-typescript-app",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#new-nextjs-with-typescript-app",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"New Next.js with TypeScript App"]}),` `,(0,n.jsx)(e.p,{children:"Open your terminal and run:"}),` `,(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsxs)(e.code,{className:"language-bash code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`npx create-next-app -e with-typescript contentlayer-example `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"# or"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"yarn"}),` create next-app -e with-typescript contentlayer-example `]})]})}),` `,(0,n.jsxs)(e.p,{children:["That command will place the project in a ",(0,n.jsx)(e.code,{children:"contentlayer-example"})," directory. Change into that directory."]}),` `,(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsx)(e.code,{className:"language-bash code-highlight",children:(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token builtin class-name",children:"cd"}),` contentlayer-example `]})})}),` `,(0,n.jsxs)(e.h3,{id:"add-tailwind-css",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#add-tailwind-css",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Add Tailwind CSS"]}),` `,(0,n.jsxs)(e.p,{children:["If you'd like to add some styling as we go without much extra effort, ",(0,n.jsx)(l,{href:"https://tailwindcss.com/docs/guides/nextjs",children:"follow these instructions"})," to add Tailwind to your project."]}),` `,(0,n.jsxs)(e.h3,{id:"install-contentlayer",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#install-contentlayer",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Install Contentlayer"]}),` `,(0,n.jsxs)(e.p,{children:["Using Contentlayer in a Next.js project is easiest if you use the ",(0,n.jsx)(e.a,{href:"https://www.contentlayer.dev/docs/reference/next-contentlayer",children:(0,n.jsx)(e.code,{children:"next-contentlayer"})})," plugin. Install Contentlayer and the Next.js plugin:"]}),` `,(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsxs)(e.code,{className:"language-bash code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"npm"})," ",(0,n.jsx)(e.span,{className:"token function",children:"install"}),` contentlayer next-contentlayer `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"# or"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"yarn"})," ",(0,n.jsx)(e.span,{className:"token function",children:"add"}),` contentlayer next-contentlayer `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Then wrap your next configuration object in the ",(0,n.jsxs)(e.a,{href:"https://www.contentlayer.dev/docs/reference/next-contentlayer#withcontentlayer",children:[(0,n.jsx)(e.code,{children:"withContentlayer"})," utility"]}),". This hooks Contentlayer into the ",(0,n.jsx)(e.code,{children:"next dev"})," and ",(0,n.jsx)(e.code,{children:"next build"})," processes."]}),` `,(0,n.jsxs)(e.p,{children:["Create a new file ",(0,n.jsx)(e.code,{children:"next.config.js"})," in the root of your project, and add the following code."]}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"next.config.js"}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," withContentlayer ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"require"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'next-contentlayer'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:["module",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"exports"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"withContentlayer"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Then add the following lines to your ",(0,n.jsx)(e.code,{children:"tsconfig.json"})," file:"]}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"tsconfig.json"}),(0,n.jsx)(e.pre,{className:"language-json",children:(0,n.jsxs)(e.code,{className:"language-json code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:'"compilerOptions"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:'"baseUrl"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"."'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:'"paths"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:'"contentlayer/generated"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"./.contentlayer/generated"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line highlight-line",children:[" ",(0,n.jsx)(e.span,{className:"token property",children:'"include"'}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token string",children:'"next-env.d.ts"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:'"**/*.tsx"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:'"**/*.ts"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:'".contentlayer/generated"'}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Contentlayer generates files in the ",(0,n.jsx)(e.code,{children:".contentlayer/generated"})," directory. This tells TypeScript to create a module alias of ",(0,n.jsx)(e.code,{children:"contentlayer/generated"})," to the generated files directory."]}),` `,(0,n.jsxs)(e.h2,{id:"simple-blog-site",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#simple-blog-site",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Simple Blog Site"]}),` `,(0,n.jsxs)(e.h3,{id:"define-document-schema",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#define-document-schema",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Define Document Schema"]}),` `,(0,n.jsx)(e.p,{children:"With all the tools we need installed, we can now define the document schema. A document is an individual piece of content that Contentlayer transforms into data you can use in your components."}),` `,(0,n.jsxs)(e.p,{children:["Because we're building a simple blog site, let's define a single document type called ",(0,n.jsx)(e.code,{children:"Post"}),". Create a file ",(0,n.jsx)(e.code,{children:"contentlayer.config.ts"})," in the root of your project, and add the following code."]}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"contentlayer.config.ts"}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," defineDocumentType",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," makeSource ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'contentlayer/source-files'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Post"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"defineDocumentType"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" name",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Post'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" filePathPattern",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"**/*.md"}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" fields",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" title",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'string'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" description",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'The title of the post'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" summary",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'string'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" description",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'The summary of the post'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" image",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'string'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" description",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'The banner image of the post'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" date",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'date'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" description",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'The date of the post'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" required",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"true"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" computedFields",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" slug",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" type",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'string'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"resolve"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"post"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsxs)(e.span,{className:"token template-string",children:[(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"}),(0,n.jsx)(e.span,{className:"token string",children:"/posts/"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"_raw"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"flattenedPath"}),(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token template-punctuation string",children:"`"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token function",children:"makeSource"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" contentDirPath",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'posts'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" documentTypes",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Post"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["The above config specifies a single document type called ",(0,n.jsx)(e.code,{children:"Post"}),". These documents are expected to be markdown ",(0,n.jsx)(e.code,{children:".md"})," files that live within a ",(0,n.jsx)(e.code,{children:"posts"})," directory in the root of your project. The data objects generated from these files will have the following properties:"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"title"}),": String pulled from the file's frontmatter."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"summary"}),": String pulled from the file's frontmatter."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"image"}),": String pulled from the file's frontmatter."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"date"}),": JavaScript ",(0,n.jsx)(e.code,{children:"Date"})," object, pulled from the file's frontmatter."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"body"}),": An object that contains the ",(0,n.jsx)(e.code,{children:"raw"})," content from the markdown file and the converted html string. (This is built into Contentlayer by default and does not have to be defined.)"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"url"}),": A string that takes the name of the file (without the extension) and prepends ",(0,n.jsx)(e.code,{children:"/posts/"})," to it, thus defining the path at which that content will be available on your site."]}),` `]}),` `,(0,n.jsxs)(e.h3,{id:"add-post-content",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#add-post-content",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Add Post Content"]}),` `,(0,n.jsxs)(e.p,{children:["Create a few markdown ",(0,n.jsx)(e.code,{children:".md"})," files in the ",(0,n.jsx)(e.code,{children:"posts"})," directory and add some placeholder content. Below is an example of how one might look like:"]}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"posts/post-one.md"}),(0,n.jsx)(e.pre,{className:"language-md",children:(0,n.jsxs)(e.code,{className:"language-md code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token front-matter-block",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"---"}),` `]})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token front-matter-block",children:(0,n.jsxs)(e.span,{className:"token font-matter yaml language-yaml",children:[(0,n.jsx)(e.span,{className:"token key atrule",children:"title"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"}),` Blog Post One Title `]})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token front-matter-block",children:(0,n.jsxs)(e.span,{className:"token font-matter yaml language-yaml",children:[(0,n.jsx)(e.span,{className:"token key atrule",children:"summary"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," Lorem ipsum dolor sit amet",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` consectetur adipiscing elit. `]})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token front-matter-block",children:(0,n.jsxs)(e.span,{className:"token font-matter yaml language-yaml",children:[(0,n.jsx)(e.span,{className:"token key atrule",children:"image"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," post",(0,n.jsx)(e.span,{className:"token punctuation",children:"-"}),`one.jpg `]})})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsxs)(e.span,{className:"token front-matter-block",children:[(0,n.jsxs)(e.span,{className:"token font-matter yaml language-yaml",children:[(0,n.jsx)(e.span,{className:"token key atrule",children:"date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token datetime number",children:"2021-12-24"})]}),` `]})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token front-matter-block",children:(0,n.jsx)(e.span,{className:"token punctuation",children:"---"})}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsx)(e.span,{className:"code-line",children:`Nullam vestibulum cursus laoreet. Morbi neque lorem, molestie a nibh nec, `}),(0,n.jsx)(e.span,{className:"code-line",children:`egestas hendrerit ex. Phasellus tincidunt sapien ac libero ultricies `}),(0,n.jsx)(e.span,{className:"code-line",children:`sollicitudin. Curabitur vitae ex et ligula ornare faucibus id ac ex. `}),(0,n.jsx)(e.span,{className:"code-line",children:`Ut ac aliquam tortor. Duis posuere posuere arcu sit amet gravida. Nullam `}),(0,n.jsx)(e.span,{className:"code-line",children:`augue urna, ornare vel pulvinar in, lobortis quis est. Donec dolor neque, `}),(0,n.jsx)(e.span,{className:"code-line",children:`pellentesque nec augue sed, varius porta neque. `}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsx)(e.span,{className:"code-line",children:`Mollit nisi cillum exercitation minim officia velit laborum non Lorem `}),(0,n.jsx)(e.span,{className:"code-line",children:`adipisicing dolore. Labore commodo consectetur commodo velit adipisicing `}),(0,n.jsx)(e.span,{className:"code-line",children:`dolore dolor reprehenderit aliquip. Reprehenderit cillum mollit eiusmod `}),(0,n.jsx)(e.span,{className:"code-line",children:`excepteur elit ipsum aute pariatur in. Cupidatat ex culpa velit culpa ad non `}),(0,n.jsx)(e.span,{className:"code-line",children:`labore exercitation irure laborum. `})]})}),` `,(0,n.jsxs)(e.h3,{id:"add-blog-feed",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#add-blog-feed",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Add blog Feed"]}),` `,(0,n.jsx)(e.p,{children:"Now we bring it all together by displaying the data into our pages."}),` `,(0,n.jsxs)(e.h4,{id:"date-formatting-helper",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#date-formatting-helper",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Date Formatting Helper"]}),` `,(0,n.jsxs)(e.p,{children:["Add the ",(0,n.jsx)(e.code,{children:"date-fns"})," library to help us with formating the date."]}),` `,(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsxs)(e.code,{className:"language-bash code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"npm"})," ",(0,n.jsx)(e.span,{className:"token function",children:"install"}),` date-fns `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"# or"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"yarn"})," ",(0,n.jsx)(e.span,{className:"token function",children:"add"}),` date-fns `]})]})}),` `,(0,n.jsxs)(e.h3,{id:"update-home-page",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#update-home-page",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Update Home Page"]}),` `,(0,n.jsxs)(e.p,{children:["Update the default home page ",(0,n.jsx)(e.code,{children:"pages/index.tsx"})," markup with a list of all the posts and links to the individual post pages."]}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"pages/index.tsx"}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Link"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'next/link'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Head"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'next/head'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," compareDesc",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," format",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," parseISO ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'date-fns'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," allPosts ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'contentlayer/generated'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"getStaticProps"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," posts ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," allPosts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"sort"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:["a",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," b"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token function",children:"compareDesc"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"a",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"new"})," ",(0,n.jsx)(e.span,{className:"token class-name",children:"Date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"b",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," props",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," posts ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostCard"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"post"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"mb-6 bg-gray-100 p-4 shadow hover:shadow-lg rounded-xl"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"h2 className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"text-xl font-bold mb-2"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Link"})," href",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"slug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"a className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"text-blue-700 hover:text-blue-900"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"title"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"a",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Link"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"h2",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"time dateTime",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"block text-sm text-slate-600"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token function",children:"format"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token function",children:"parseISO"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'LLLL d, yyyy'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"time",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"p className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"text-base text-gray-700"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"summary"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"p",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Home"})}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"posts",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"mx-auto max-w-2xl py-16"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Head"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"title",(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Contentlayer"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Blog"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Example"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"title",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Head"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"h1 className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"mb-8 text-3xl font-bold"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Contentlayer"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Blog"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Example"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"h1",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"posts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:["post",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," idx"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostCard"})," key",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"idx",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Notice that the data was already available to us as ",(0,n.jsx)(e.code,{children:"allPosts"}),", coming from ",(0,n.jsx)(e.code,{children:"contentlayer/generated"}),". We used ",(0,n.jsx)(e.code,{children:"allPosts"})," to sort the posts using the date property, and then sent the posts to the home page as props."]}),` `,(0,n.jsxs)(e.p,{children:["The home page then used the post data to map through the individual posts and render ",(0,n.jsx)(e.code,{children:"PostCard"})," components. As your site grows, you'll want to break these components out into their own files. We're showing everything in the same file here to keep things simple."]}),` `,(0,n.jsxs)(e.h4,{id:"preview-the-app",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#preview-the-app",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Preview the App"]}),` `,(0,n.jsx)(e.p,{children:"Fire up the Next.js dev server to preview your app."}),` `,(0,n.jsx)(e.pre,{className:"language-bash",children:(0,n.jsxs)(e.code,{className:"language-bash code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"npm"}),` run dev `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"# or"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token function",children:"yarn"}),` dev `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Visit ",(0,n.jsx)(e.code,{children:"localhost:3000"})," on your browser. You should see a list of the posts you added to the ",(0,n.jsx)(e.code,{children:"posts"})," directory!"]}),` `,(0,n.jsx)(c,{alt:"Example blog localhost preview on the browser.",src:"contentlayer-in-nextjs/browser-preview-localhost.png",width:1600,height:844}),` `,(0,n.jsxs)(e.h3,{id:"add-post-layout",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#add-post-layout",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Add Post Layout"]}),` `,(0,n.jsx)(e.p,{children:"Notice that if you click on individual posts, you get a 404 error. That's because we haven't created the pages for these posts. Let's do that!"}),` `,(0,n.jsxs)(e.p,{children:["We will use Next.js ",(0,n.jsx)(e.a,{href:"https://nextjs.org/docs/routing/dynamic-routes",children:"dynamic routes"})," to achieve that."]}),` `,(0,n.jsxs)(e.p,{children:["Create the page at ",(0,n.jsx)(e.code,{children:"pages/posts/[slug].tsx"})," and add the following code."]}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"pages/posts/[slug].tsx"}),(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsxs)(e.code,{className:"language-js code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Head"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'next/head'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Link"})})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'next/link'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," format",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," parseISO ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'date-fns'"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," allPosts ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'contentlayer/generated'"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"getStaticPaths"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," paths ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," allPosts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"map"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"post"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"url"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" paths",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" fallback",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token boolean",children:"false"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"async"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"getStaticProps"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," params ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," post ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," allPosts",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method function property-access",children:"find"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token parameter",children:"post"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"_raw"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"flattenedPath"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," params",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"slug"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" props",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" post",(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostLayout"})})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token parameter",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," post ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token keyword control-flow",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Head"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"title",(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"title"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"title",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Head"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"article className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"mx-auto max-w-2xl py-16"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"mb-6 text-center"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Link"})," href",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"/"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"a className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"text-center text-sm font-bold uppercase text-blue-700"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Home"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"a",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Link"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"mb-6 text-center"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"h1 className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"mb-1 text-3xl font-bold"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"title"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"h1",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"time dateTime",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"text-sm text-slate-600"'}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token function",children:"format"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token function",children:"parseISO"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"date"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'LLLL d, yyyy'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"time",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"div",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"div className",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token string",children:'"cl-post-body"'})," dangerouslySetInnerHTML",(0,n.jsx)(e.span,{className:"token operator",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," __html",(0,n.jsx)(e.span,{className:"token operator",children:":"})," post",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"body"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"html"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),"article",(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token operator",children:"<"}),(0,n.jsx)(e.span,{className:"token operator",children:"/"}),(0,n.jsx)(e.span,{className:"token operator",children:">"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token punctuation",children:")"}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword module",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword module",children:"default"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"PostLayout"}),` `]})]})}),` `,(0,n.jsxs)(e.p,{children:["Notice again that we're importing data from ",(0,n.jsx)(e.code,{children:"contentlayer/generated"}),". This is the beauty of Contentlayer. It has already loaded and shaped our data objects and keeps the logic in ",(0,n.jsx)(e.code,{children:"getStaticPaths()"})," and ",(0,n.jsx)(e.code,{children:"getStaticProps()"})," nice, clean and simple."]}),` `,(0,n.jsx)(e.p,{children:"Now clicking on a post link from the home page should lead you to a working post page."}),` `,(0,n.jsx)(c,{alt:"Blog post layout browser preview.",src:"contentlayer-in-nextjs/blog-layout-preview.png",width:1600,height:844}),` `,(0,n.jsxs)(e.h2,{id:"deploying-to-vercel",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#deploying-to-vercel",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Deploying to Vercel"]}),` `,(0,n.jsx)(e.p,{children:"Our simple blog is now showing a list of posts, fetched from your local disk, and displayed nicely using Tailwind CSS. Let's deploy our Next.js application to Vercel:"}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:["Push your code to a git repository (e.g. ",(0,n.jsx)(e.a,{href:"https://github.com/",children:"GitHub"}),", GitLab, BitBucket)"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.a,{href:"https://vercel.com/new",children:"Import your Next.js project"})," into Vercel"]}),` `,(0,n.jsx)(e.li,{children:'Click "Deploy"'}),` `]}),` `,(0,n.jsxs)(e.p,{children:["Vercel will auto-detect you are using Next.js and enable the correct settings for your deployment. Finally, your application is deployed at a URL like ",(0,n.jsx)(e.a,{href:"https://contentlayer-blog.vercel.app",children:"contentlayer.vercel.app"}),"."]}),` `,(0,n.jsxs)(e.h2,{id:"conclusion",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#conclusion",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,n.jsx)(e.p,{children:"You now have a simple blog site with Contentlayer and Next.js which can be customized to fit your specific needs."}),` `,(0,n.jsxs)(e.h3,{id:"resources",children:[(0,n.jsx)(e.a,{className:"anchor",href:"#resources",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Resources"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Learn more about ",(0,n.jsx)(e.a,{href:"https://www.contentlayer.dev/docs/concepts/how-contentlayer-works",children:"how Contentlayer works"}),"."]}),` `,(0,n.jsxs)(e.li,{children:["Contentlayer starter project from the official ",(0,n.jsx)(e.a,{href:"https://github.com/vercel/next.js/tree/canary/examples/with-contentlayer",children:"Next.js examples directory"}),"."]}),` `,(0,n.jsxs)(e.li,{children:["Full ",(0,n.jsx)(e.a,{href:"https://github.com/dayon3/contentlayer-example",children:"Source Code"})," from the example above."]}),` `]}),` `,(0,n.jsx)(e.p,{children:"Thanks for reading! If this tutorial was helpful, share your feedback in the comments section below."}),` `,(0,n.jsx)(e.p,{children:"Happy Coding!\u{1F913}"})]})}function x(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(d,a)})):d(a)}var v=x;function o(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(j);})(); ;return Component;

#contentlayer

Build a Simple Blog with Contentlayer, Next.js and Tailwind CSS