var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(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 m(e))!N.call(a,c)&&c!==s&&t(a,c,{get:()=>e[c],enumerable:!(l=h(e,c))||l.enumerable});return a};var y=(a,e,s)=>(s=a!=null?d(u(a)):{},i(e||!a||!a.__esModule?t(s,"default",{value:a,enumerable:!0}):s,a)),f=a=>i(t({},"__esModule",{value:!0}),a);var r=k((S,o)=>{o.exports=_jsx_runtime});var v={};g(v,{default:()=>x,frontmatter:()=>b});var n=y(r()),b={title:"How I Made This Website",author:"Brown",publishedOn:"Aug 16, 2021",description:"I used Next.js for routing and rendering pages, Mantine for UI and Contentlayer for MDX handling.",cover:"/static/images/websiteMaking.webp",coverCredit:"Florian Klauer",coverCreditLink:"https://unsplash.com/photos/-K6JMRMj4x4"};function p(a){let e=Object.assign({p:"p",a:"a",h2:"h2",code:"code",pre:"pre",span:"span",ul:"ul",li:"li",h3:"h3",img:"img",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td",div:"div"},a.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"There are so many ways to create a website these days with each CMS, framework and platform espousing their own philosophy and way of doing things. So choosing one that fits the desired website is crucial."}),` `,(0,n.jsxs)(e.p,{children:["I wanted to use ReactJS extensively when building this website. So I chose ",(0,n.jsx)(e.a,{href:"https://nextjs.org/",children:"Next.js"})," which is a framework that improves developer experience (DX) when working with ReactJS. It supports both Server-side Rendering (SSR) which is helpful for interactive content and Static Generation (SG) for static content like this blog page you are now reading. Static Generation is very useful for SEO and is generally much snappier than server side rendering."]}),` `,(0,n.jsxs)(e.p,{children:["For User Interface I selected a React based component library, ",(0,n.jsx)(e.a,{href:"https://mantine.dev/",children:"Mantine"}),", because it will gel well with the already react based website."]}),` `,(0,n.jsxs)(e.p,{children:["For content heavy websites such as blogs, markdown is a very good choice. ",(0,n.jsx)(e.a,{href:"https://mdxjs.com/",children:"MDX"})," gives a ReactJS spin to Markdown making it easier to include data from react components using JSX syntax. Now to handle the MDX files and render them as webpages, ",(0,n.jsx)(e.a,{href:"https://www.contentlayer.dev/",children:"Contentlayer"})," is used."]}),` `,(0,n.jsx)(e.p,{children:`This is not a step my step tutorial but a bird's eye view on how this website is built. Javascript is a fast moving ecosystem and the frameworks and libraries mentioned here might drop and pick features or break API. It's better to be clear on "what to do" so "how to do" can be determined by reading the documentation of the software. A comfortable level of ReactJS knowledge is assumed.`}),` `,(0,n.jsx)(e.h2,{id:"the-website",children:"The Website"}),` `,(0,n.jsxs)(e.p,{children:['We will build a "Portfolio Website" with a landing page, project showcase, a blog and a resume. The website will be deployed as a Static Site. We will assume our website url is ',(0,n.jsx)(e.code,{children:"mywebsite.tld"}),". A top level domain (tld) can be ",(0,n.jsx)(e.code,{children:".com"}),", ",(0,n.jsx)(e.code,{children:".org"}),", ",(0,n.jsx)(e.code,{children:".dev"})," etc."]}),` `,(0,n.jsx)(e.h2,{id:"start-with-the-mantine-template-for-nextjs",children:"Start with the Mantine template for Next.js"}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:"https://mantine.dev/guides/next/",children:"Next.js template of Mantine"}),' is the starting point for the project. You can start from scratch but the template gets some gnarly details right. You can either click on "',(0,n.jsx)(e.a,{href:"https://github.com/mantinedev/mantine-next-template",children:"Use this template"}),`" or clone that repository if you don't have a GitHub account.`]}),` `,(0,n.jsx)(e.p,{children:"This is the directory structure of the template:"}),` `,(0,n.jsx)(e.pre,{className:"language-shell",children:(0,n.jsxs)(e.code,{className:"language-shell code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`mantine-next-template on \uE0A0 master via \uE718 v18.7.0 `}),(0,n.jsxs)(e.span,{className:"code-line",children:["\u276F tree ",(0,n.jsx)(e.span,{className:"token builtin class-name",children:"."})," ",(0,n.jsx)(e.span,{className:"token parameter variable",children:"-L"})," ",(0,n.jsx)(e.span,{className:"token number",children:"3"})," ",(0,n.jsx)(e.span,{className:"token parameter variable",children:"-I"}),` node_modules `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token builtin class-name",children:"."}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:`\u251C\u2500\u2500 components `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u251C\u2500\u2500 ColorSchemeToggle `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u2502\xA0\xA0 \u2514\u2500\u2500 ColorSchemeToggle.tsx `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u2514\u2500\u2500 Welcome `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u251C\u2500\u2500 Welcome.story.tsx `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u251C\u2500\u2500 Welcome.styles.ts `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u251C\u2500\u2500 Welcome.test.tsx `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u2514\u2500\u2500 Welcome.tsx `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u251C\u2500\u2500 jest.config.js `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u251C\u2500\u2500 jest.setup.js `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u251C\u2500\u2500 next.config.js `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u251C\u2500\u2500 next-env.d.ts `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u251C\u2500\u2500 package.json `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u251C\u2500\u2500 pages `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u251C\u2500\u2500 _app.tsx `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u251C\u2500\u2500 _document.tsx `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u2514\u2500\u2500 index.tsx `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u251C\u2500\u2500 public `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2502\xA0\xA0 \u2514\u2500\u2500 favicon.svg `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u251C\u2500\u2500 README.md `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u251C\u2500\u2500 tsconfig.json `}),(0,n.jsx)(e.span,{className:"code-line",children:`\u2514\u2500\u2500 yarn.lock `}),(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 number",children:"5"})," directories, ",(0,n.jsx)(e.span,{className:"token number",children:"17"}),` files `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `})]})}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["The web pages to be served are located at ",(0,n.jsx)(e.code,{children:"/pages/*"}),"."]}),` `,(0,n.jsxs)(e.li,{children:["The React Components that can be imported and used in web pages are located at ",(0,n.jsx)(e.code,{children:"/components/*"})]}),` `,(0,n.jsxs)(e.li,{children:["Next.js has built it support of ",(0,n.jsx)(e.a,{href:"https://css-tricks.com/css-modules-part-1-need/",children:"CSS Modules"}),". We can create them at ",(0,n.jsx)(e.code,{children:"/styles/*"})]}),` `,(0,n.jsxs)(e.li,{children:["We will create the data for our blog in ",(0,n.jsx)(e.code,{children:"/data/blog/*"})," and for projects page at ",(0,n.jsx)(e.code,{children:"/data/projects/*"}),"."]}),` `]}),` `,(0,n.jsx)(e.h2,{id:"nextjs-primer",children:"Next.js Primer"}),` `,(0,n.jsx)(e.p,{children:"Next.js is the foundation upon which the website is built. It will take care of routing web pages, rendering web pages and finally building the static website."}),` `,(0,n.jsx)(e.h3,{id:"start-the-server",children:"Start the Server!"}),` `,(0,n.jsxs)(e.p,{children:["Once you are in the template directory run ",(0,n.jsx)(e.code,{children:"yarn"})," to install the required packages. Now you are ready to start the server by using ",(0,n.jsx)(e.code,{children:"yarn dev"})," and see the default page. Note the url printed on the terminal and open it in a web browser. The url is usually ",(0,n.jsx)(e.a,{href:"http://localhost:3000",children:"http://localhost:3000"}),"."]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"/static/images/blog/1-website_making/MantineDefaultPage.png",alt:"Mantine Default Page",title:"Mantine Default Page"})}),` `,(0,n.jsx)(e.h3,{id:"static-routing",children:"Static Routing"}),` `,(0,n.jsxs)(e.p,{children:["Next.js supports routing right out of the box: the page structure of your website will be similar to the directory structure of ",(0,n.jsx)(e.code,{children:"/pages/"}),". Content of ",(0,n.jsx)(e.code,{children:"/pages/index.tsx"})," will be the index page of the website."]}),` `,(0,n.jsxs)(e.p,{children:["If there is a file ",(0,n.jsx)(e.code,{children:"/pages/about.tsx"})," it will end up being ",(0,n.jsx)(e.code,{children:"mywebsite.tld/about"}),". But the web page ",(0,n.jsx)(e.code,{children:"mywebsite.tld/about"})," can also be generated from ",(0,n.jsx)(e.code,{children:"/pages/about/index.tsx"}),"."]}),` `,(0,n.jsxs)(e.p,{children:["The files can have ",(0,n.jsx)(e.code,{children:".tsx"}),", ",(0,n.jsx)(e.code,{children:".ts"}),", ",(0,n.jsx)(e.code,{children:".jsx"})," or ",(0,n.jsx)(e.code,{children:".js"})," as extension. We will use this static routing for Home, Projects, Resume and Blog Listing pages."]}),` `,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{align:"left",children:"Page"}),(0,n.jsx)(e.th,{align:"left",children:"Directory Path"}),(0,n.jsx)(e.th,{align:"left",children:"Website Path"})]})}),(0,n.jsxs)(e.tbody,{children:[(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{align:"left",children:"Index page"}),(0,n.jsx)(e.td,{align:"left",children:(0,n.jsx)(e.code,{children:"/pages/index.tsx"})}),(0,n.jsx)(e.td,{align:"left",children:(0,n.jsx)(e.code,{children:"mywebsite.tld/"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{align:"left",children:"Projects page"}),(0,n.jsx)(e.td,{align:"left",children:(0,n.jsx)(e.code,{children:"/pages/projects/index.tsx"})}),(0,n.jsx)(e.td,{align:"left",children:(0,n.jsx)(e.code,{children:"mywebsite.tld/projects"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{align:"left",children:"Resume page"}),(0,n.jsx)(e.td,{align:"left",children:(0,n.jsx)(e.code,{children:"/pages/resume/index.tsx"})}),(0,n.jsx)(e.td,{align:"left",children:(0,n.jsx)(e.code,{children:"mywebsite.tld/resume"})})]}),(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{align:"left",children:"Blog page"}),(0,n.jsx)(e.td,{align:"left",children:(0,n.jsx)(e.code,{children:"/pages/blog/index.tsx"})}),(0,n.jsx)(e.td,{align:"left",children:(0,n.jsx)(e.code,{children:"mywebsite.tld/blog"})})]})]})]}),` `,(0,n.jsx)(e.h3,{id:"dynamic-routing",children:"Dynamic Routing"}),` `,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"mywebsite.tld/blog"})," page will list all the articles but how will the articles themselves be served? We can create a file for every blog article in the directory ",(0,n.jsx)(e.code,{children:"/pages/blog/index.tsx"})," but that wouldn't be so ",(0,n.jsx)(e.a,{href:"https://wikiless.org/wiki/Don%27t_repeat_yourself",children:"DRY"}),". We will find ourselves repeating the same layout used by every blog article in every blog article file."]}),` `,(0,n.jsx)(e.p,{children:'For a blog article the data (text and image content of the article) is different but the layout (text styling, page layout etc) stays the same so it would best if we can define the layout once and save data for each article separately. Then we can "pass" the data of the blog article to a single special page. That page will use that to data render the web page using the specified layout. And this is where dynamic routing comes in.'}),` `,(0,n.jsxs)(e.p,{children:["The special page will be ",(0,n.jsx)(e.code,{children:"/pages/blog/[slug].tsx"}),". The braces indicate it's special as in the matching path segment will be made available, by the router object, to logic inside the file."]}),` `,(0,n.jsx)(e.p,{children:"It's better when you see it:"}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"/pages/blog/[slug].tsx"}),(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx 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:"{"})," useRouter ",(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:"'next/router'"}),` `]}),(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:"Blog"})}),(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"})," router ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useRouter"}),(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 comment",children:`/* `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token comment",children:` the same name used inside the braces `})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token comment",children:` in this case "slug" `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",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:"{"}),"slug",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," router",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"query"}),(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.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` You are on the `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"span"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation 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 literal-property property",children:"color"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"red"'}),(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:"{"}),"slug",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` page `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",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.p,{children:(0,n.jsx)(e.img,{src:"/static/images/blog/1-website_making/dynrt1.png",alt:'Dynamic Routing: When the slug is "start"',title:"Dynamic Routing: When the slug is 'start'"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"/static/images/blog/1-website_making/dynrt2.png",alt:'Dynamic Routing: When the slug is "article"',title:"Dynamic Routing: When the slug is 'article'"})}),` `,(0,n.jsx)(e.p,{children:"Here, we are rendering the page based on the url after it is requested. But this will take up precious processing time and introduces lag when browsing the website. These issues can be dealt with using Static Generation."}),` `,(0,n.jsx)(e.h3,{id:"static-generation",children:"Static Generation"}),` `,(0,n.jsx)(e.p,{children:"To pre-render all the blog pages first we need to determine all the possible articles or paths. Let's assume the following array contains all the articles in a blog."}),` `,(0,n.jsx)(e.pre,{className:"language-js",children:(0,n.jsx)(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"})," blogPages ",(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:"'article1'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'aritcle2'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'article3'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:";"}),` `]})})}),` `,(0,n.jsxs)(e.p,{children:["Now, with ",(0,n.jsx)(e.code,{children:"getStaticPaths()"})," we can indicate all the possible paths. The paths will be passed as an array of objects. There is an optional property called ",(0,n.jsx)(e.code,{children:"fallback"})," which will be rendered if the web page associated with the original path fails to load."]}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"/pages/blog/[slug].tsx"}),(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx 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:"{"})," useRouter ",(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:"'next/router'"}),` `]}),(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:"Blog"})}),(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"})," router ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useRouter"}),(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 comment",children:`/* `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token comment",children:` the same name used inside the braces `})}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token comment",children:` in this case "slug" `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",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:"{"}),"slug",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," router",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"query"}),(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.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` You are on the `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"span"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation 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 literal-property property",children:"color"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"red"'}),(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:"{"}),"slug",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` page `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",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:"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"})," blogPages ",(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:"'article1'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'aritcle2'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'article3'"}),(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 literal-property property",children:"paths"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," blogPages",(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:"blog"}),(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.jsx)(e.span,{className:"token literal-property property",children:"params"}),(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 literal-property property",children:"slug"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," blog",(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 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.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",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.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:["Now that we know the path of articles we can then generate the articles themselves using ",(0,n.jsx)(e.code,{children:"getStaticProps()"}),". We don't need to use the ",(0,n.jsx)(e.code,{children:"router"})," object anymore because ",(0,n.jsx)(e.code,{children:"getStaticProps()"})," will pass the relevant data to the page component."]}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"/pages/blog/[slug].tsx"}),(0,n.jsx)(e.pre,{className:"language-jsx",children:(0,n.jsxs)(e.code,{className:"language-jsx code-highlight",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:"Blog"})}),(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:"{"}),"blog",(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.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` You are on the `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"span"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"style"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation 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 literal-property property",children:"color"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"red"'}),(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:"{"}),"blog",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` page `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",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:"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"})," allBlogs ",(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:"'article1'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'aritcle2'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",children:"'article3'"}),(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 literal-property property",children:"paths"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," allBlogs",(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:"blog"}),(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.jsx)(e.span,{className:"token literal-property property",children:"params"}),(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 literal-property property",children:"slug"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," blog",(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.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsx)(e.span,{className:"token literal-property property",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.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"})," blogData ",(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 literal-property property",children:"article1"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"Introduction"'}),(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 literal-property property",children:"article2"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"Deployment"'}),(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 literal-property property",children:"article3"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"Debug"'}),` `]}),(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 keyword",children:"const"})," currentBlog ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," allBlogs",(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:"blog"}),(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," blog",(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 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.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.jsx)(e.span,{className:"token literal-property property",children:"props"}),(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 literal-property property",children:"blog"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," currentBlog ",(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 punctuation",children:"}"}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `})]})}),` `,(0,n.jsxs)(e.p,{children:["Now when you visit ",(0,n.jsx)(e.code,{children:"mywebsite.tld/blog/aritcle1"}),' url, "You are on the Introduction page" is displayed.']}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"/static/images/blog/1-website_making/sg1.png",alt:'Statically Generated Pages: When the slug is "article"',title:"Article 1: Notice the slug in the url"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.img,{src:"/static/images/blog/1-website_making/sg2.png",alt:'Statically Generated Pages: When the slug is "article"',title:"Article 3: Notice the slug in the url"})}),` `,(0,n.jsxs)(e.p,{children:['As you have noticed, the "blog data" is in a variable named ',(0,n.jsx)(e.code,{children:"blogData"}),`. In practice, blog data is retrieved from a "source". The source could be provided by a plug that consumes files on server or connects to an api or database. In our case that plugin is 'Contentlayer'`]}),` `,(0,n.jsx)(e.h2,{id:"setting-up-contentlayer",children:"Setting up Contentlayer"}),` `,(0,n.jsxs)(e.p,{children:["Contentlayer is a content preprocessor that transforms local files (more sources planned for future) into JSON which can be easily import into an application. In our case the local files will be MDX files located at ",(0,n.jsx)(e.code,{children:"/data/*"}),". Contentlayer comes with MDX support."]}),` `,(0,n.jsx)(e.h3,{id:"install-contentlayer",children:"Install Contentlayer"}),` `,(0,n.jsx)(e.p,{children:"Install the Contentlayer as such:"}),` `,(0,n.jsx)(e.pre,{className:"language-shell",children:(0,n.jsx)(e.code,{className:"language-shell code-highlight",children:(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.jsx)(e.h3,{id:"integrate-contentlayer-with-nextjs",children:"Integrate Contentlayer with Next.js"}),` `,(0,n.jsxs)(e.p,{children:["For live-reload, as in see the change as we edit the project files, we need to wrap Next.js configuration with ",(0,n.jsx)(e.code,{children:"withContentlayer"}),":"]}),` `,(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:[(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," withBundleAnalyzer ",(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/bundle-analyzer'"}),(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 literal-property property",children:"enabled"}),(0,n.jsx)(e.span,{className:"token operator",children:":"})," process",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"env"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token constant",children:"ANALYZE"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",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.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 function",children:"withBundleAnalyzer"}),(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 literal-property property",children:"reactStrictMode"}),(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 literal-property property",children:"eslint"}),(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 literal-property property",children:"ignoreDuringBuilds"}),(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.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.jsx)(e.h3,{id:"process-mdx-files-and-generate-web-pages",children:"Process MDX Files and Generate Web Pages"}),` `,(0,n.jsxs)(e.p,{children:["Next step would be configuring Contentlayer but first we need to agree upon the format of MDX files. The blog files will be located at ",(0,n.jsx)(e.code,{children:"/data/blog/*.mdx"}),"."]}),` `,(0,n.jsx)(e.p,{children:"The format for the MDX blog page would be:"}),` `,(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 front-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:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'This is the title of the blog article.'"}),` `]})})}),(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 front-matter yaml language-yaml",children:[(0,n.jsx)(e.span,{className:"token key atrule",children:"author"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Author name'"}),` `]})})}),(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 front-matter yaml language-yaml",children:[(0,n.jsx)(e.span,{className:"token key atrule",children:"publishedOn"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'When was the article published?'"}),` `]})})}),(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 front-matter yaml language-yaml",children:[(0,n.jsx)(e.span,{className:"token key atrule",children:"description"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'A short text. Can be used as subtitle.'"}),` `]})})}),(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 front-matter yaml language-yaml",children:[(0,n.jsx)(e.span,{className:"token key atrule",children:"cover"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Hero Image! See https://blog.hubspot.com/marketing/hero-image'"}),` `]})})}),(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 front-matter yaml language-yaml",children:[(0,n.jsx)(e.span,{className:"token key atrule",children:"coverCredit"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Give credit to the artist'"}),` `]})})}),(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 front-matter yaml language-yaml",children:[(0,n.jsx)(e.span,{className:"token key atrule",children:"coverCreditLink"}),(0,n.jsx)(e.span,{className:"token punctuation",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'Link to the artist page or photo'"})]}),` `]})}),(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:`This is the main body of the blog article. `}),(0,n.jsx)(e.span,{className:"code-line",children:` `})]})}),` `,(0,n.jsx)(e.p,{children:"What's happening here:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["The data inside the two ",(0,n.jsx)(e.code,{children:"---"}),' is called "frontmatter".']}),` `,(0,n.jsx)(e.li,{children:"Frontmatter is not parse into HTML."}),` `,(0,n.jsx)(e.li,{children:"It will be made available as JSON data by the content processor (in our case Contentlayer)."}),` `,(0,n.jsx)(e.li,{children:"After the frontmatter is the markdown that will be converted to HTML which will be used to render the associated web page."}),` `]}),` `,(0,n.jsx)(e.p,{children:"Now we know the format of the MDX blog page we will configure Contentlayer accordingly:"}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"/contentlayer.config.ts"}),(0,n.jsx)(e.pre,{className:"language-ts",children:(0,n.jsxs)(e.code,{className:"language-ts code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(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",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",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"const"})," Blog ",(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 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:"'Blog'"}),(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.jsx)(e.span,{className:"token string",children:"'blog/*.mdx'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" contentType",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'mdx'"}),(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:"{"})," 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:","})," 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.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" author",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",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:","})," 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.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" publishedOn",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",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:","})," 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.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 punctuation",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:","})," 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.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" cover",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",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:","})," 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.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" coverCredit",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",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:","})," 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.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" coverCreditLink",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",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:","})," 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.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:"("}),"doc",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"=>"})," doc",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"_raw",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),"sourceFileName",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token function",children:"replace"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsxs)(e.span,{className:"token regex",children:[(0,n.jsx)(e.span,{className:"token regex-delimiter",children:"/"}),(0,n.jsxs)(e.span,{className:"token regex-source language-regex",children:[(0,n.jsx)(e.span,{className:"token special-escape escape",children:"\\."}),"mdx"]}),(0,n.jsx)(e.span,{className:"token regex-delimiter",children:"/"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token string",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.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",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",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:"'data'"}),(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:"["}),"Blog",(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:[" mdx",(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:[" remarkPlugins",(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:"]"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" rehypePlugins",(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:"]"}),(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.p,{children:"What's happening here:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"We define a Blog document with different properties which will be used by Contentlayer to render MDX into HTML."}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"filePathPattern"})," tells where to look for the files"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"contentType"})," tells which kind of files to expect"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"fields"})," what are the fields that need to be parsed from the files"]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"computedFields"}),' can be used to compute new data from the file such as slugs (path segments) or even use other plugins to determine "time to read" etc']}),` `,(0,n.jsxs)(e.li,{children:["Finally all the Documents defined with ",(0,n.jsx)(e.code,{children:"defineDocumentType"})," are used by ",(0,n.jsx)(e.code,{children:"makeSource"}),' to make a "source".']}),` `,(0,n.jsx)(e.li,{children:"The source i.e the documents defined earlier will now be made available and can be imported by specifying the document name."}),` `,(0,n.jsxs)(e.li,{children:["For example document exported as ",(0,n.jsx)(e.code,{children:"Blog"})," will be available as ",(0,n.jsx)(e.code,{children:"allBlogs"}),": ",(0,n.jsx)(e.code,{children:"import { allBlogs } from 'contentlayer/generated';"})]}),` `]}),` `,(0,n.jsxs)(e.p,{children:["Now that we have configured Contentlayer, we will make use of it in blog page. Let's go back to ",(0,n.jsx)(e.code,{children:"/pages/blog/[slug].tsx"}),'. We can now "import article data" using Contentlayer into our blog page component. A JSON object will be created for each ',(0,n.jsx)(e.code,{children:".mdx"})," file. The html is passed as a string which can be converted to JSX using ",(0,n.jsx)(e.code,{children:"useMDXComponent()"})," provided by Contentlayer."]}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"/pages/blog/[slug].tsx"}),(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," useMDXComponent ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'next-contentlayer/hooks'"}),(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:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," allBlogs ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(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 keyword",children:"import"})," ",(0,n.jsx)(e.span,{className:"token imports",children:(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"BlogLayout"})})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'../../components/Blog/Blog'"}),(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:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"Blog"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," blog ",(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"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"MDXContent"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token function",children:"useMDXComponent"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"blog",(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:"code"}),(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",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"BlogLayout"})]})," ",(0,n.jsxs)(e.span,{className:"token spread",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),"blog",(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 plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"MDXContent"})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",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:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",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:"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 operator",children:":"})," allBlogs",(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:"("}),"blog",(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:"{"})," params",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," slug",(0,n.jsx)(e.span,{className:"token operator",children:":"})," blog",(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 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.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.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:"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:"{"})," 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"})," currentBlog ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," allBlogs",(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:"("}),"blog",(0,n.jsx)(e.span,{className:"token punctuation",children:")"})," ",(0,n.jsx)(e.span,{className:"token arrow operator",children:"=>"})," blog",(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 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.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:"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:"{"})," blog",(0,n.jsx)(e.span,{className:"token operator",children:":"})," currentBlog ",(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 punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"What's happening here:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Contentlayer will parse all requested MDX files and creates an array of JSON objects which is imported here as ",(0,n.jsx)(e.code,{children:"allBlogs"}),"."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"getStaticPaths()"})," will create paths based on the ",(0,n.jsx)(e.code,{children:"slug"})," property of the JSON object from ",(0,n.jsx)(e.code,{children:"allBlogs"}),"."]}),` `,(0,n.jsxs)(e.li,{children:["The paths created previously will be passed to ",(0,n.jsx)(e.code,{children:"getStaticProps()"}),' which will proceed to prerender the respective pages. It does so by passing "data" associated with the "path" to the blog page component which is ',(0,n.jsx)(e.code,{children:"/pages/blog/[slug].tsx"})," in our case."]}),` `]}),` `,(0,n.jsxs)(e.p,{children:["Now, we need a page that lists all the blog articles in a single page, kind of like an index for the blog. We will create it at ",(0,n.jsx)(e.code,{children:"/pages/blog/index.tsx"}),"."]}),` `,(0,n.jsx)(e.p,{children:"This is an example of a very simple page listing all the articles in a blog."}),` `,(0,n.jsx)(e.div,{className:"rehype-code-title",children:"/data/projects/[project].tsx"}),(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",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",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"next/link"'}),(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:"import"})," ",(0,n.jsxs)(e.span,{className:"token imports",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," allBlogs ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"from"})," ",(0,n.jsx)(e.span,{className:"token string",children:'"contentlayer/generated"'}),(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:"BlogCard"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," title",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," author",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," publishedOn",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," cover",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," description",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," slug ",(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"})," linkToArticle ",(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:"blog/"}),(0,n.jsxs)(e.span,{className:"token interpolation",children:[(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"slug",(0,n.jsx)(e.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,n.jsx)(e.span,{className:"token string",children:"/"}),(0,n.jsx)(e.span,{className:"token template-punctuation string",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:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Link"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"href"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"linkToArticle",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"passHref"}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(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 punctuation",children:"{"}),"title",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"author",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:" ~ "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"publishedOn",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"description",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",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:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",children:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"Projects"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," allBlogs ",(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:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token tag",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 plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"The Blog"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"allBlogs",(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:"("}),"blog",(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.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"BlogCard"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"key"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"blog",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"_id"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsxs)(e.span,{className:"token spread",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),"blog",(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:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token tag",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:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token keyword",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:"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:"{"})," allBlogs ",(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 punctuation",children:"}"}),` `]})]})}),` `,(0,n.jsx)(e.p,{children:"What's happening here:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["All the MDX files from ",(0,n.jsx)(e.code,{children:"/data/blog/*.mdx"})," will be processed and imported as ",(0,n.jsx)(e.code,{children:"allBlogs"})," from Contentlayer."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:"getStaticProps()"})," will pass ",(0,n.jsx)(e.code,{children:"allBlogs"})," to the ",(0,n.jsx)(e.code,{children:"Projects"})," component forcing the page ",(0,n.jsx)(e.code,{children:"mywebsite.tld/blog"})," to prerender at build time."]}),` `]}),` `,(0,n.jsxs)(e.p,{children:["Similarly a project listing page, ",(0,n.jsx)(e.code,{children:"/pages/projects/index.tsx"}),", with separate pages for each project, ",(0,n.jsx)(e.code,{children:"/pages/projects/[project].tsx"}),", can be created. The associated data for each project is stored at ",(0,n.jsx)(e.code,{children:"/data/projects/*.mdx"})," as MDX files."]}),` `,(0,n.jsxs)(e.p,{children:["The project listing page ",(0,n.jsx)(e.code,{children:"/data/projects/projects.tsx"})," will be available on the website as ",(0,n.jsx)(e.code,{children:"mywebsite.tld/projects"}),"."]}),` `,(0,n.jsx)(e.h2,{id:"user-interface-with-mantine",children:"User Interface with Mantine"}),` `,(0,n.jsxs)(e.p,{children:["You might have noticed ",(0,n.jsx)(e.code,{children:"/pages/_app.tsx"})," in the project directory. It is used to override the global App component to maintain a particular layout or persist state."]}),` `,(0,n.jsxs)(e.p,{children:["So ",(0,n.jsx)(e.code,{children:"_app.tsx"})," can be used to:"]}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"Set the page layout for the website. Eg: Headers, footers, navbar."}),` `,(0,n.jsx)(e.li,{children:"Set a UI's context providers for theme properties, colorschemes and notifications. In this case for Mantine UI."}),` `]}),` `,(0,n.jsxs)(e.p,{children:["Let's concentrate on what ",(0,n.jsx)(e.code,{children:"/pages/_app.tsx"})," returns:"]}),` `,(0,n.jsx)(e.pre,{className:"language-tsx",children:(0,n.jsxs)(e.code,{className:"language-tsx code-highlight",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token comment",children:"//imports"}),` `]}),(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:"export"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"default"})," ",(0,n.jsx)(e.span,{className:"token keyword",children:"function"})," ",(0,n.jsx)(e.span,{className:"token function",children:"App"}),(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 maybe-class-name",children:"AppProps"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"&"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," colorScheme",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"ColorScheme"})," ",(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"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"Component"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," pageProps ",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," props",(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"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"["}),"colorScheme",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," setColorScheme",(0,n.jsx)(e.span,{className:"token punctuation",children:"]"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsxs)(e.span,{className:"token generic-function",children:[(0,n.jsx)(e.span,{className:"token function",children:"useState"}),(0,n.jsxs)(e.span,{className:"token generic class-name",children:[(0,n.jsx)(e.span,{className:"token operator",children:"<"}),"ColorScheme",(0,n.jsx)(e.span,{className:"token operator",children:">"})]})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"props",(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token property-access",children:"colorScheme"}),(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",children:"const"})," ",(0,n.jsx)(e.span,{className:"token function-variable function",children:"toggleColorScheme"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"value",(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:"ColorScheme"}),(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",children:"const"})," nextColorScheme ",(0,n.jsx)(e.span,{className:"token operator",children:"="})," value ",(0,n.jsx)(e.span,{className:"token operator",children:"||"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"colorScheme ",(0,n.jsx)(e.span,{className:"token operator",children:"==="})," ",(0,n.jsx)(e.span,{className:"token string",children:"'dark'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"?"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'light'"})," ",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token string",children:"'dark'"}),(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 function",children:"setColorScheme"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),"nextColorScheme",(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 function",children:"setCookie"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'mantine-color-scheme'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," nextColorScheme",(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," maxAge",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token number",children:"60"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,n.jsx)(e.span,{className:"token number",children:"60"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,n.jsx)(e.span,{className:"token number",children:"24"})," ",(0,n.jsx)(e.span,{className:"token operator",children:"*"})," ",(0,n.jsx)(e.span,{className:"token number",children:"30"})," ",(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 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",children:"return"})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token tag",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 plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Head"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"title"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:"Mantine next example"}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"name"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"viewport",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"content"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"minimum-scale=1, initial-scale=1, width=device-width",(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 plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"rel"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"shortcut icon",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"href"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"/favicon.svg",(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 plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsx)(e.span,{className:"code-line",children:(0,n.jsx)(e.span,{className:"token plain-text",children:` `})}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"ColorSchemeProvider"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"colorScheme"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"colorScheme",(0,n.jsx)(e.span,{className:"token punctuation",children:"}"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"toggleColorScheme"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),"toggleColorScheme",(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 plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"MantineProvider"})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"theme"}),(0,n.jsxs)(e.span,{className:"token script language-javascript",children:[(0,n.jsx)(e.span,{className:"token script-punctuation punctuation",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"{"})," colorScheme ",(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 attr-name",children:"withGlobalStyles"})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"withNormalizeCSS"}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"NotificationsProvider"})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),(0,n.jsx)(e.span,{className:"token class-name",children:"Component"})]})," ",(0,n.jsxs)(e.span,{className:"token spread",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"{"}),(0,n.jsx)(e.span,{className:"token spread operator",children:"..."}),"pageProps",(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 plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),(0,n.jsx)(e.span,{className:"token plain-text",children:` `})]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token plain-text",children:" "}),(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token tag",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:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"App"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"."}),(0,n.jsx)(e.span,{className:"token method-variable function-variable method function property-access",children:"getInitialProps"})," ",(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:"{"})," ctx ",(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 punctuation",children:"{"})," ctx",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token maybe-class-name",children:"GetServerSidePropsContext"})," ",(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:[" colorScheme",(0,n.jsx)(e.span,{className:"token operator",children:":"})," ",(0,n.jsx)(e.span,{className:"token function",children:"getCookie"}),(0,n.jsx)(e.span,{className:"token punctuation",children:"("}),(0,n.jsx)(e.span,{className:"token string",children:"'mantine-color-scheme'"}),(0,n.jsx)(e.span,{className:"token punctuation",children:","})," ctx",(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 string",children:"'light'"}),(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.p,{children:"What's happening here:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsxs)(e.li,{children:["Contents of the ",(0,n.jsx)(e.code,{children:""})," component make it to the actual head of the HTML document that is finaly served to the user."]}),` `,(0,n.jsxs)(e.li,{children:["So you can set any metadata or style information in the ",(0,n.jsx)(e.code,{children:""})," component."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:""})," has color scheme information. For example dark/light mode."]}),` `,(0,n.jsx)(e.li,{children:'Since it is a context provider, this color scheme information is available to all the Mantine components. Thankfully all those components support "dark/light" mode.'}),` `,(0,n.jsxs)(e.li,{children:["To survive between sessions a cookie, ",(0,n.jsx)(e.code,{children:"getInitialProps"}),", is set using the ",(0,n.jsx)(e.code,{children:"cookie-next"})," package. Then if a cookie is present the value is loaded and passed by ",(0,n.jsx)(e.code,{children:"getInitialProps"})," to the App component so ",(0,n.jsx)(e.code,{children:""})," can set the scheme appropriately."]}),` `,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:""})," and ",(0,n.jsx)(e.code,{children:""})," context providers handle styles and notifications respectively."]}),` `]}),` `,(0,n.jsxs)(e.p,{children:["If you plan on using ",(0,n.jsx)(e.a,{href:"https://ui.mantine.dev/",children:"Mantine UI components"})," or build some yourself you will put those in ",(0,n.jsx)(e.code,{children:"/components/componentDir/component.tsx"}),"."]}),` `,(0,n.jsx)(e.h2,{id:"build-and-deploy",children:"Build and Deploy"}),` `,(0,n.jsx)(e.h3,{id:"static-only",children:"Static Only"}),` `,(0,n.jsxs)(e.p,{children:["You can build the website using ",(0,n.jsx)(e.code,{children:"yarn export"})," and serve the resulting files in ",(0,n.jsx)(e.code,{children:"/out"})," using a web server of your choice or an online host. But this method comes with ",(0,n.jsx)(e.a,{href:"https://nextjs.org/docs/advanced-features/static-html-export",children:"limitations"})," and so this option should be carefully considered."]}),` `,(0,n.jsx)(e.p,{children:"Examples:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/",children:"Cloudflare Pages"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://github.com/vercel/next.js/tree/canary/examples/github-pages",children:"GitHub Pages"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting",children:"Firebase"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://docs.microsoft.com/en-us/azure/static-web-apps/deploy-nextjs",children:"Azure Static Web Apps"})}),` `]}),` `,(0,n.jsx)(e.h3,{id:"managed-server",children:"Managed Server"}),` `,(0,n.jsx)(e.p,{children:"Much better way would be to deploy the website on host providers that specifically support Next.js."}),` `,(0,n.jsx)(e.p,{children:"Examples:"}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://vercel.com/new/clone",children:"Vercel"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://aws.github.io/copilot-cli/",children:"AWS Copilot"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://www.digitalocean.com/products/app-platform",children:"Digital Ocean App Platform"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://github.com/vercel/next.js/tree/canary/examples/with-docker",children:"Google Cloud Run"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://elements.heroku.com/buildpacks/mars/heroku-nextjs",children:"Heroku"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://railway.app/new/starters/nextjs-prisma",children:"Railway"})}),` `,(0,n.jsx)(e.li,{children:(0,n.jsx)(e.a,{href:"https://render.com/docs/deploy-nextjs-app",children:"Render"})}),` `]}),` `,(0,n.jsx)(e.h2,{id:"conclusion",children:"Conclusion"}),` `,(0,n.jsx)(e.p,{children:`Next.js provides so many sane features out of the box it makes an excellent choice for developing ReactJS apps or websites. But Next.js even with all it's "opinions" leaves the task of managing content to the user and this is where Contentlayer comes it. Both of them compliment each other and give an excellent DX for the developer.`})]})}function w(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(p,a)})):p(a)}var x=w;return f(v);})(); ;return Component;