var Component=(()=>{var i=Object.create;var o=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var c=a=>o(a,"__esModule",{value:!0});var m=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),k=(a,n)=>{c(a);for(var s in n)o(a,s,{get:n[s],enumerable:!0})},N=(a,n,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of d(n))!u.call(a,t)&&t!=="default"&&o(a,t,{get:()=>n[t],enumerable:!(s=p(n,t))||s.enumerable});return a},g=a=>N(c(o(a!=null?i(h(a)):{},"default",a&&a.__esModule&&"default"in a?{get:()=>a.default,enumerable:!0}:{value:a,enumerable:!0})),a);var r=m((j,l)=>{l.exports=_jsx_runtime});var b={};k(b,{default:()=>w,frontmatter:()=>y});var e=g(r()),y={title:"Build a JAMStack Blog with NextJS and Ghost",publishedAt:"2021-08-17",summary:"Learn the fundamentals of JAMStack by building a blazing-fast NextJS blog that uses the Ghost publishing platform as a headless CMS.",tags:["NextJS","Ghost"]};function f(a){let n=Object.assign({p:"p",a:"a",ul:"ul",li:"li",h2:"h2",span:"span",ol:"ol",strong:"strong",code:"code",pre:"pre",div:"div",h3:"h3"},a.components),{wrapper:s}=n,t=(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.p,{children:["I have a certain affinity for ",(0,e.jsx)(n.a,{href:"https://ghost.org/",children:"Ghost"}),`, an open-source publishing platform created in 2013 and built on `,(0,e.jsx)(n.a,{href:"https://nodejs.org/en/",children:"NodeJS"}),`. It was the first platform I used to build my website back in 2015, but over time curiosity struck and I moved away from it.`]}),` `,(0,e.jsxs)(n.p,{children:[`Now, in 2021, I'm revisiting my old friend again. Why? It's latest release, `,(0,e.jsx)(n.a,{href:"https://ghost.org/changelog/4/",children:"version 4"}),`, brings some awesome `,(0,e.jsx)(n.a,{href:"https://ghost.org/features/",children:"new features"}),":"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:"A revamped Dashboard"}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://ghost.org/docs/newsletters/",children:"Native support for Newsletters"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://ghost.org/docs/members/#2-subscriptions",children:"Paid subscriptions"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.a,{href:"https://ghost.org/integrations/",children:"Tons of integrations"})}),` `,(0,e.jsx)(n.li,{children:"A cheaper Ghost(Pro) starter plan"}),` `]}),` `,(0,e.jsx)(n.p,{children:`It's a huge update, and I'm a sucker for brand redesigns. However, since 2015 I've acquired the skills to build a site without needing to rely on tools like Ghost, so why go back?`}),` `,(0,e.jsxs)(n.h2,{id:"the-beauty-of-ghost",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#the-beauty-of-ghost",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"The beauty of Ghost"]}),` `,(0,e.jsxs)(n.p,{children:[`Personal publishing and gated content as a business continues to increase in popularity, and Ghost is well positioned in this space. `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/members/",children:"The new Members feature"}),` gives creators a way to monetize their work with very little effort on the administrative side.`]}),` `,(0,e.jsx)(n.p,{children:`Managing content is a real pleasure. You can write posts, schedule them for publishing and send them straight to the inbox of your members. You can mark some posts as free and others as paid, providing a way for your audience to fund your work.`}),` `,(0,e.jsx)(n.p,{children:`And all of this is controlled from a clean Dashboard. It's a really great way to manage your content. Much better than writing in markdown files.`}),` `,(0,e.jsxs)(n.h2,{id:"my-issues-with-ghost",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#my-issues-with-ghost",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"My issues with Ghost"]}),` `,(0,e.jsxs)(n.p,{children:[`Customization. I want full control of how my site looks and feels. In reality, Ghost does not stop you from having this level of power. The platform has `,(0,e.jsx)(n.a,{href:"https://ghost.org/themes/",children:"a rich theme ecosystem"}),`, with paid and free themes available to all. However, if you want to build a theme of your own `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/themes/",children:"you have to do it in handlebars"}),"."]}),` `,(0,e.jsx)(n.p,{children:"I'll pass."}),` `,(0,e.jsx)(n.p,{children:`Another is performance. Ghost is pretty fast and comes with a lot of niceties out of the box (SEO for one), but it's not fast enough for me. I want blazing fast, and I have the skills to do that on my own.`}),` `,(0,e.jsxs)(n.h2,{id:"enter-the-jamstack",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#enter-the-jamstack",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Enter the JAMStack"]}),` `,(0,e.jsxs)(n.p,{children:[`The good news is that `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/jamstack/",children:"Ghost is front-end agnostic"}),`, meaning you can "bring your own" front-end. Manage content in Ghost, and query for it using their APIs. A Headless CMS.`]}),` `,(0,e.jsx)(n.p,{children:`Headless because the CMS has no dedicated front-end. You can plop whichever one you want on top, and the CMS will abide. It's a beautiful thing really, and gets us to the foundation of JAMStack.`}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"J"}),"avaScript - build your front-end with a modern JavaScript framework."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"A"}),"PIs - Query for your content with Ghost's APIs"]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.strong,{children:"M"}),"arkup - Write your content as markup in Ghost"]}),` `]}),` `,(0,e.jsxs)(n.p,{children:["In this post we'll use ",(0,e.jsx)(n.a,{href:"https://nextjs.org/",children:"NextJS"}),` as our front-end framework of choice. With NextJS, we can build a blazing fast front-end and query Ghost for our content.`]}),` `,(0,e.jsx)(n.p,{children:`It's the best of both worlds. Keep the Dashboard and Editor on Ghost's side, and the performance and developer experience on NextJS's side.`}),` `,(0,e.jsxs)(n.h2,{id:"installing-ghost",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#installing-ghost",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Installing Ghost"]}),` `,(0,e.jsxs)(n.p,{children:[`The first thing we need to do is `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/ghost-cli/",children:"install Ghost on our development machine"}),`. Open a terminal and install the latest version of `,(0,e.jsx)(n.a,{href:"https://github.com/TryGhost/Ghost-CLI",children:(0,e.jsx)(n.code,{children:"ghost-cli"})}),` globally using your package manager of choice. I am a `,(0,e.jsx)(n.code,{children:"yarn"})," man."]}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash",children:[(0,e.jsx)(n.span,{className:"token function",children:"yarn"})," ",(0,e.jsx)(n.span,{className:"token function",children:"add"}),` ghost-cli@latest `]})}),` `,(0,e.jsxs)(n.p,{children:["It's important to note that your version of ",(0,e.jsx)(n.code,{children:"node"}),` matters. I've run into issues in the past when being on some of the latest versions. At time of writing this, `,(0,e.jsxs)(n.a,{href:"https://ghost.org/docs/faq/node-versions/",children:["Ghost recommends v14 of ",(0,e.jsx)(n.code,{children:"node"})]}),`, their long term support version.`]}),` `,(0,e.jsx)(n.p,{children:`Next we'll run a few terminal commands to create a directory and install a ghost instance:`}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash",children:[(0,e.jsx)(n.span,{className:"token function",children:"mkdir"}),` ghost-development `,(0,e.jsx)(n.span,{className:"token builtin class-name",children:"cd"}),` ghost-development ghost `,(0,e.jsx)(n.span,{className:"token function",children:"install"})," ",(0,e.jsx)(n.span,{className:"token builtin class-name",children:"local"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:[`The first two commands are self-explanatory. The name of your directory does not matter. The third command, `,(0,e.jsx)(n.code,{children:"ghost install local"}),`, runs a number of scripts and sets you up with a local installation of Ghost hosted at a local url. Usually this url is `,(0,e.jsx)(n.code,{children:"http://localhost:2368"}),`. If you navigate to it in your browser of choice, what you'll see is `,(0,e.jsx)(n.a,{href:"https://github.com/TryGhost/Casper",children:"Casper"}),`, the default Ghost theme.`]}),` `,(0,e.jsxs)(n.p,{children:["If you go to ",(0,e.jsx)(n.code,{children:"http://localhost:2368/ghost"}),`, you'll hit the admin side of Ghost. This will require you to create an account. It's not going to be a live account, just a local one that will let you interface with the admin side for development \u{1F433}.`]}),` `,(0,e.jsx)(n.p,{children:`Put in whatever data you want, skip the staff users section and boom. You're logged in.`}),` `,(0,e.jsxs)(n.h2,{id:"installing-nextjs",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#installing-nextjs",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Installing NextJS"]}),` `,(0,e.jsxs)(n.p,{children:[`Now that we have Ghost up and running locally, we'll setup our front-end. In a separate directory, `,(0,e.jsx)(n.a,{href:"https://nextjs.org/docs/getting-started#setup",children:"bootstrap a NextJS app"}),`. Again, with `,(0,e.jsx)(n.code,{children:"yarn"}),":"]}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash",children:[(0,e.jsx)(n.span,{className:"token function",children:"yarn"}),` create next-app my-next-front-end `]})}),` `,(0,e.jsxs)(n.p,{children:["This will set you up with a NextJS project in the ",(0,e.jsx)(n.code,{children:"my-next-front-end"}),` directory. That's it!`]}),` `,(0,e.jsxs)(n.h2,{id:"querying-for-blog-posts",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#querying-for-blog-posts",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Querying for blog posts"]}),` `,(0,e.jsx)(n.p,{children:`When you start up a Ghost site for the first time, the theme will deploy with some "Getting Started" posts. This is adequate for our purpose. No need to create more. I mean, you can if you want. Do you.`}),` `,(0,e.jsxs)(n.p,{children:[`Eventually we'll need to fetch those blog posts. Ghost has two APIs, the `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/content-api/",children:"Content API"}),` and the `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/admin-api/",children:"Admin API"}),`. For a list of blog posts we'll need to interface with the Content API.`]}),` `,(0,e.jsx)(n.p,{children:`Ghost also provides a few API clients to make things easy. Let's install the client for the Content API. In your NextJS app directory run the following command:`}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash",children:[(0,e.jsx)(n.span,{className:"token function",children:"yarn"})," ",(0,e.jsx)(n.span,{className:"token function",children:"add"}),` @tryghost/content-api `]})}),` `,(0,e.jsxs)(n.p,{children:[`If you're interested, here is `,(0,e.jsxs)(n.a,{href:"https://ghost.org/docs/content-api/javascript/",children:["the documentation for the ",(0,e.jsx)(n.code,{children:"@tryghost/content-api"})]}),"."]}),` `,(0,e.jsxs)(n.p,{children:[`Now that we have our dependency installed, we'll write some logic to fetch a list of blog posts. I like to put this sort of logic in a `,(0,e.jsx)(n.code,{children:"lib"})," directory:"]}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash",children:[(0,e.jsx)(n.span,{className:"token function",children:"mkdir"}),` lib `]})}),` `,(0,e.jsx)(n.p,{children:`Of course you can also create the folder in your text editor, but we're terminal first here.`}),` `,(0,e.jsxs)(n.p,{children:["In our ",(0,e.jsx)(n.code,{children:"lib"})," directory we'll create a ",(0,e.jsx)(n.code,{children:"ghost.js"})," file to keep it simple:"]}),` `,(0,e.jsx)(n.pre,{className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash",children:[(0,e.jsx)(n.span,{className:"token builtin class-name",children:"cd"}),` lib `,(0,e.jsx)(n.span,{className:"token function",children:"touch"}),` ghost.js `]})}),` `,(0,e.jsxs)(n.p,{children:["Alright now we're cooking. Let's open up ",(0,e.jsx)(n.code,{children:"ghost.js"}),` and import `,(0,e.jsx)(n.code,{children:"@tryghost/content-api"}),":"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"lib/ghost.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"GhostContentAPI"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@tryghost/content-api'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})}),` `,(0,e.jsx)(n.p,{children:"In order to start using the client we'll need to initiate it:"}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"lib/ghost.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"GhostContentAPI"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@tryghost/content-api'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," api ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"GhostContentAPI"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` url`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` key`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` version`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})}),` `,(0,e.jsx)(n.p,{children:`I've left the 3 configuration properties empty for a reason. They each need explanation:`}),` `,(0,e.jsxs)(n.h3,{id:"url-and-key",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#url-and-key",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),(0,e.jsx)(n.code,{children:"url"})," and ",(0,e.jsx)(n.code,{children:"key"})]}),` `,(0,e.jsxs)(n.p,{children:["Both the ",(0,e.jsx)(n.code,{children:"url"})," and ",(0,e.jsx)(n.code,{children:"key"}),` values will be different in a development and production environment. We are only concerned with the development environment for now. Navigate to the local instance of your Ghost admin (`,(0,e.jsx)(n.code,{children:"http://localhost:2368/ghost"}),`) in the browser. On the left hand side you should see an "Integrations" section. Click it. We will need to create a new custom integration to get these values.`]}),` `,(0,e.jsxs)(n.p,{children:[`Click the "Add Custom Integration" button. Name the integration whatever you want. I'm calling it "NextJS Front-end". Click "Create", and you should then see a few values. The ones you want are the "Content API Key" and the "API URL". These will be your development `,(0,e.jsx)(n.code,{children:"url"})," and ",(0,e.jsx)(n.code,{children:"key"}),` values. Remember, in production they will be different.`]}),` `,(0,e.jsxs)(n.h3,{id:"version",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#version",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),(0,e.jsx)(n.code,{children:"version"})]}),` `,(0,e.jsxs)(n.p,{children:[`At time of writing, this is the 3rd version of the Ghost API, though they also support a `,(0,e.jsx)(n.code,{children:"canary"})," value. Let's be safe and use ",(0,e.jsx)(n.code,{children:"'v3'"}),"."]}),` `,(0,e.jsx)(n.p,{children:"Our final configuration should look like this:"}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"lib/ghost.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"GhostContentAPI"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@tryghost/content-api'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," api ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"GhostContentAPI"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` url`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` key`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` version`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'v3'"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:["Instead of hardcoding the ",(0,e.jsx)(n.code,{children:"url"})," and ",(0,e.jsx)(n.code,{children:"key"}),` values, lets make it environment-agnostic. Create a `,(0,e.jsx)(n.code,{children:".env.local"}),` file at the root of your NextJS application, and inside add the two values:`]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:".env.local"}),(0,e.jsx)(n.pre,{className:"language-markup",children:(0,e.jsxs)(n.code,{className:"language-markup",children:["GHOST_API_URL=",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"YOUR_API_URL"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` GHOST_CONTENT_API_KEY=`,(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"YOUR_CONTENT_API_KEY"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),` `]})}),` `,(0,e.jsxs)(n.p,{children:["And in our ",(0,e.jsx)(n.code,{children:"ghost.js"})," file we can update our config to the following:"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"lib/ghost.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"GhostContentAPI"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@tryghost/content-api'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," api ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"new"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"GhostContentAPI"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` url`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," process",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"env"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token constant",children:"GHOST_API_URL"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` key`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," process",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"env"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token constant",children:"GHOST_CONTENT_API_KEY"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` version`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'v3'"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})}),` `,(0,e.jsx)(n.p,{children:`This works out really well, because in development we can use our local instance of Ghost, but in production we can use the production instance. Just so long as you make sure to supply the correct values to these environment variables when deploying to production. But more on that later.`}),` `,(0,e.jsx)(n.p,{children:`Now that we are configured, lets right a function that fetches a list of all blog posts from Ghost:`}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"lib/ghost.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllPosts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," posts ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," api",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"posts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"browse"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," limit",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'all'"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," posts",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsx)(n.p,{children:"Easy peezy lemon squeezy."}),` `,(0,e.jsxs)(n.h2,{id:"render-a-list-of-blog-posts",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#render-a-list-of-blog-posts",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Render a list of blog posts"]}),` `,(0,e.jsxs)(n.p,{children:[`Now that we have our function to fetch a list of posts, lets use it to render them on our homepage. In your `,(0,e.jsx)(n.code,{children:"pages/index.js"}),` file, remove the bootstrapped code and replace with the following:`]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/index.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Link"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/link'"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," getAllPosts ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../lib/ghost'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," posts ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllPosts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," posts ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Home"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," posts ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"ul",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"posts",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"post"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"li key",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"post",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"uuid"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Link"})," href",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"/"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"post",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"slug"}),(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"a",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"post",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"title"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"a",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Link"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"li",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"ul",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:[`The `,(0,e.jsxs)(n.a,{href:"https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation",children:[(0,e.jsx)(n.code,{children:"getStaticProps"})," function"]}),` is a special function in NextJS that lets us fetch data at build time. What this means is we can fetch our list of posts once, when we build our project, and generate a static html document that renders them.`]}),` `,(0,e.jsxs)(n.p,{children:["Using our ",(0,e.jsx)(n.code,{children:"getAllPosts"})," function from ",(0,e.jsx)(n.code,{children:"lib/ghost.js"}),`, our posts will be fetched and supplied to the `,(0,e.jsx)(n.code,{children:"Home"})," page component as the ",(0,e.jsx)(n.code,{children:"posts"}),` prop. Inside of our render tree we display the `,(0,e.jsx)(n.code,{children:"title"}),` of each post as a `,(0,e.jsxs)(n.a,{href:"https://nextjs.org/docs/api-reference/next/link",children:["NextJS ",(0,e.jsx)(n.code,{children:"Link"})]}),`. For a list of all available values on a post coming from Ghost (hey that rhymes), see `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/content-api/#posts",children:"here"}),"."]}),` `,(0,e.jsxs)(n.h2,{id:"creating-pages-for-each-post",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#creating-pages-for-each-post",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Creating pages for each post"]}),` `,(0,e.jsxs)(n.p,{children:[`We might have hundreds of blog posts to render on our site, and we can't possibly be burdened to predefine all of their routes. But, we know that every post has an associated `,(0,e.jsx)(n.code,{children:"slug"})," value. We can use this to our advantage."]}),` `,(0,e.jsxs)(n.p,{children:["In the ",(0,e.jsx)(n.code,{children:"pages"})," directory, lets create a new file called ",(0,e.jsx)(n.code,{children:"[slug].js"}),`. These are known as `,(0,e.jsx)(n.a,{href:"https://nextjs.org/docs/routing/dynamic-routes",children:"dynamic routes in NextJS"}),`, and they are an awesome feature. Think of this page as a "catch all". The `,(0,e.jsx)(n.code,{children:"slug"}),` will be used as the parameter that lets us dynamically render content based on its value.`]}),` `,(0,e.jsxs)(n.p,{children:[`To do this, we'll need to utilize another special function in NextJS called `,(0,e.jsx)(n.a,{href:"https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation",children:(0,e.jsx)(n.code,{children:"getStaticPaths"})}),`. Here's how it works:`]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/[slug].js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," getAllPosts ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../lib/ghost'"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticPaths"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," posts ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllPosts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," paths ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," posts",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," paths",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," fallback",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"getStaticPaths"}),` is the mechanism by which we statically generate dynamic routes. We fetch all the blog posts from Ghost at build time, map through each and pull out their `,(0,e.jsx)(n.code,{children:"slug"})," value. The ",(0,e.jsx)(n.code,{children:"slug"}),` will be given to each page as a unique parameter, and we can use it to fetch the content for the corresponding blog post.`]}),` `,(0,e.jsxs)(n.p,{children:[`If this is confusing, consider the following example. If you had only one blog post in your Ghost instance, and that post had the slug `,(0,e.jsx)(n.code,{children:"/my-happy-slug"}),`, then a page will be created at the route `,(0,e.jsx)(n.code,{children:"yoursite.com/my-happy-slug"}),"."]}),` `,(0,e.jsxs)(n.h2,{id:"rendering-post-content",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#rendering-post-content",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Rendering post content"]}),` `,(0,e.jsxs)(n.p,{children:[`Now that we can generate a page for every post, we'll need to render some content. In order to accomplish this, we'll need to create a new function in our `,(0,e.jsx)(n.code,{children:"lib/ghost.js"})," file called ",(0,e.jsx)(n.code,{children:"getPostBySlug"}),":"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"lib/ghost.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getPostBySlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"slug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," post ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," api",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"posts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"read"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," formats",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token string",children:"'html'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"}),` post `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:[`This function accepts the slug of a post and returns the post's data, making sure to include the post's content in `,(0,e.jsx)(n.code,{children:"html"}),` format. If you're curious to see what a post object returned from Ghost looks like, you can refer to `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/content-api/#posts",children:"the documentation again"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["Let's use this function in our ",(0,e.jsx)(n.code,{children:"[slug].js"})," page to fetch post content:"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/[slug].js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," getAllPosts",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," getPostBySlug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../lib/ghost'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticPaths"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," posts ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllPosts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," paths ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," posts",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," paths",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," fallback",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," params",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," data ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getPostBySlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"slug",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," data ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:["When each page is built, the ",(0,e.jsx)(n.code,{children:"getStaticProps"}),` function is called. As an argument, `,(0,e.jsx)(n.code,{children:"getStaticProps"})," receives the page's ",(0,e.jsx)(n.code,{children:"params"}),` object. Inside of this object we can gain access to the page's `,(0,e.jsx)(n.code,{children:"slug"}),` value. Now, getting the page's data is trivial. We call `,(0,e.jsx)(n.code,{children:"getPostBySlug"}),", pass the ",(0,e.jsx)(n.code,{children:"slug"}),` value, and the returned data representing our post can be passed to our page's component as the `,(0,e.jsx)(n.code,{children:"data"})," prop:"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/[slug].js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," getAllPosts",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," getPostBySlug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../lib/ghost'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticPaths"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," posts ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllPosts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," paths ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," posts",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," paths",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," fallback",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," params",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," data ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getPostBySlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"slug",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," data ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Post"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," data ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"article",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"h1",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"data",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"title"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"h1",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div dangerouslySetInnerHTML",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," __html",(0,e.jsx)(n.span,{className:"token operator",children:":"})," data",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"html"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"article",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.h2,{id:"rendering-post-tags",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#rendering-post-tags",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Rendering post tags"]}),` `,(0,e.jsxs)(n.p,{children:[`One feature that comes baked-in with most Ghost themes is this concept of tags. It is a way to categorize your content. `,(0,e.jsx)(n.code,{children:"#Programming"}),", ",(0,e.jsx)(n.code,{children:"#Health"}),", ",(0,e.jsx)(n.code,{children:"#Bitcoin"}),`, etc. These are examples of tags that you can attach to each post you write. This may not be a feature you care to support, but some people might, so I'll include a section on how to achieve it.`]}),` `,(0,e.jsxs)(n.p,{children:[`Attaching a tag to your post inside of the Ghost editor should be self-explanatory. When you query for a blog post, you can add an option to include that post's tags in the returned data. Let's update `,(0,e.jsx)(n.code,{children:"getPostBySlug"}),` to do just that:`]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"lib/ghost.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getPostBySlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"slug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," api",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"posts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"read"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," formats",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token string",children:"'html'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," include",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'tags'"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:["Now, every post will have access to its ",(0,e.jsx)(n.code,{children:"tags"}),". Render them however you'd like:"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/[slug].js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Post"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," data ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"article className",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"styles",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"article"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"h1",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"data",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"title"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"h1",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"data",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"tags"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"tag"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"span key",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"tag",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"id"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),"#",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"tag",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"name"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"span",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"hr ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div dangerouslySetInnerHTML",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," __html",(0,e.jsx)(n.span,{className:"token operator",children:":"})," data",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"html"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"article",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:["For a list of all available properties on the ",(0,e.jsx)(n.code,{children:"tag"}),` object, `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/content-api/#tags",children:"see here"}),"."]}),` `,(0,e.jsxs)(n.p,{children:[`If you want your readers to be able to click these tags to see a list of all posts tagged with this specific tag, you'll need to do a bit more work. First, lets change the `,(0,e.jsx)(n.code,{children:"span"}),` element above to a `,(0,e.jsxs)(n.a,{href:"https://nextjs.org/docs/api-reference/next/link",children:["NextJS ",(0,e.jsx)(n.code,{children:"Link"})," component"]}),":"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/[slug].js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Link"})})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/link'"}),` `,(0,e.jsx)(n.span,{className:"token comment",children:"// ..."}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"data",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"tags"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"tag"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Link"})," key",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"tag",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"id"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," href",(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"/tag/"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"tag",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"slug"}),(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"a",(0,e.jsx)(n.span,{className:"token operator",children:">"}),"#",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"tag",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"name"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"a",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Link"}),(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:[`Next, we'll need to dynamically generate a page that will render at the route `,(0,e.jsx)(n.code,{children:"/tag/[slug]"}),`. This is a similar process to how we generated dynamic pages for our blog posts.`]}),` `,(0,e.jsxs)(n.p,{children:["First let's create a function called ",(0,e.jsx)(n.code,{children:"getAllTags"})," inside of ",(0,e.jsx)(n.code,{children:"lib/ghost.js"}),` that will fetch all available tags:`]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"lib/ghost.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllTags"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," tags ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," api",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"tags"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"browse"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," limit",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'all'"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," tags",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:["Next, In your ",(0,e.jsx)(n.code,{children:"pages"})," directory, create a subdirectory called ",(0,e.jsx)(n.code,{children:"tag"}),`, and inside of it create a file called `,(0,e.jsx)(n.code,{children:"[slug].js"}),`. This page is going to be responsible for rendering a list of posts that are tagged with a specific tag name.`]}),` `,(0,e.jsxs)(n.p,{children:["For example, if you had 4 posts tagged ",(0,e.jsx)(n.code,{children:"#React"}),` in Ghost, then a route called `,(0,e.jsx)(n.code,{children:"yoursite.com/tag/react"}),` will be created, and the page will render a list of those 4 posts.`]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/tag/[slug].js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," getAllTags ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../../lib/ghost'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticPaths"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," tags ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllTags"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," paths ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," tags",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," paths",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," fallback",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:[`The above code will handle dynamic generation of each tag's page, but we still need to render some content. Let's create a new function inside of `,(0,e.jsx)(n.code,{children:"lib/ghost.js"})," file called ",(0,e.jsx)(n.code,{children:"getAllPostsByTagSlug"})," that will help us with this:"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"lib/ghost.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllPostsByTagSlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"slug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," posts ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," api",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"posts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"browse"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` limit`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'all'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` filter`,(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"tag:"}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"slug",(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," posts",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:[`This function will return all the posts that are tagged with a tag represented by its corresponding `,(0,e.jsx)(n.code,{children:"slug"}),". Let's use this in our ",(0,e.jsx)(n.code,{children:"pages/tag/[slug].js"})," file:"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/tag/[slug].js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," getAllTags",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," getAllPostsByTagSlug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../../lib/ghost'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticPaths"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," tags ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllTags"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," paths ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," tags",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," paths",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," fallback",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," params",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," posts ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllPostsByTagSlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"slug",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," posts ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:[`Let's step through what's happening here. For every tag we have in our Ghost content, we are going to generate a corresponding page. Each page will fetch a list of all posts that are tagged with that specific tag. So the tag `,(0,e.jsx)(n.code,{children:"#Programming"})," will have its own page at ",(0,e.jsx)(n.code,{children:"yoursite.com/tag/programming"}),`, and you will be able to see a list of all your posts that are tagged with `,(0,e.jsx)(n.code,{children:"#Programming"}),". Pretty sweet!"]}),` `,(0,e.jsxs)(n.p,{children:[`The one thing we haven't addressed is that, even though you can see all the posts for a particular tag, you don't actually no what tag the page is representing unless you look at the url. Let's add one more function called `,(0,e.jsx)(n.code,{children:"getTagBySlug"})," to our ",(0,e.jsx)(n.code,{children:"lib/ghost.js"})," file:"]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"lib/ghost.js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getTagBySlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"slug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," tag ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," api",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"tags"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"read"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," include",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'count.posts'"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"}),` tag `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:["Now we can call this function inside of ",(0,e.jsx)(n.code,{children:"getStaticProps"}),` to fetch some meta information about the tag itself:`]}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/tag/[slug].js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` getAllTags`,(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` getAllPostsByTagSlug`,(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` getTagBySlug `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../../lib/ghost'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticPaths"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," tags ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllTags"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," paths ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," tags",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," paths",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," fallback",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," params",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," posts ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllPostsByTagSlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"slug",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," tagData ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getTagBySlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"slug",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," posts",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," tagData ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsx)(n.p,{children:"Now lets create the component that will render all of this information:"}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/tag/[slug].js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Tag"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," posts",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," tagData ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"h1",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"tagData",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"name"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"h1",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"p",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token constant",children:"A"})," collection ",(0,e.jsx)(n.span,{className:"token keyword",children:"of"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"tagData",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"count"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"posts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," posts",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"p",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"ul",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"posts",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"post"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token comment",children:"/* render posts here */"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"ul",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsx)(n.p,{children:"And the full file will look like this:"}),` `,(0,e.jsx)(n.div,{className:"rehype-code-title",children:"pages/tag/[slug].js"}),(0,e.jsx)(n.pre,{className:"language-js",children:(0,e.jsxs)(n.code,{className:"language-js",children:[(0,e.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` getAllTags`,(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` getAllPostsByTagSlug`,(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` getTagBySlug `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../../lib/ghost'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticPaths"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," tags ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllTags"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," paths ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," tags",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," paths",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," fallback",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token boolean",children:"false"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"async"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getStaticProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," params ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," slug ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," params",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," posts ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getAllPostsByTagSlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"slug",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," tagData ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"await"})," ",(0,e.jsx)(n.span,{className:"token function",children:"getTagBySlug"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"slug",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," posts",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," tagData ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Tag"})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsxs)(n.span,{className:"token parameter",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," posts",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," tagData ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `,(0,e.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"h1",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"tagData",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"name"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"h1",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"p",(0,e.jsx)(n.span,{className:"token operator",children:">"}),(0,e.jsx)(n.span,{className:"token constant",children:"A"})," collection ",(0,e.jsx)(n.span,{className:"token keyword",children:"of"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"tagData",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"count"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"posts"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," posts",(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"p",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),"ul",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"posts",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token parameter",children:"post"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token comment",children:"/* render posts here */"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"ul",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token operator",children:"/"}),"div",(0,e.jsx)(n.span,{className:"token operator",children:">"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),` `,(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})}),` `,(0,e.jsxs)(n.p,{children:[`And that's it! If you followed closely you should have a simple NextJS-powered blog using Ghost as a headless CMS. I kept it lean and basic, so that you can build upon this over time. If you are interested in the full example, there is `,(0,e.jsx)(n.a,{href:"https://github.com/jakewies/next-ghost-demo",children:"a GitHub repository here"}),`. Feel free to clone, fork and go wild.`]}),` `,(0,e.jsxs)(n.h2,{id:"deploying-to-production",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#deploying-to-production",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Deploying to production"]}),` `,(0,e.jsx)(n.p,{children:`The last step in this journey is getting your site in production. This involves two separate applications: your CMS (Ghost), and your front-end (NextJS).`}),` `,(0,e.jsxs)(n.p,{children:[`Deploying NextJS to production is actually a breeze if you use `,(0,e.jsx)(n.a,{href:"https://vercel.com/home",children:"Vercel"}),`, the company behind the framework. They have a generous free tier, and all you have to do is hook up your GitHub repository and click a few buttons. It's painless really. They have great documentation, and setting up your environment variables:`]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.code,{children:"process.env.GHOST_API_URL"})}),` `,(0,e.jsx)(n.li,{children:(0,e.jsx)(n.code,{children:"process.env.GHOST_CONTENT_API_URL"})}),` `]}),` `,(0,e.jsx)(n.p,{children:"is a breeze."}),` `,(0,e.jsx)(n.p,{children:"Deploying Ghost to production is a little trickier. You have two options:"}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"Let Ghost take care of everything using Ghost(Pro)"}),` `,(0,e.jsx)(n.li,{children:"Self-host your Ghost instance"}),` `]}),` `,(0,e.jsxs)(n.p,{children:[`Ghost(Pro) has a starter package that starts at $9 a month, and although this isn't bad for what you get, they do not support custom themes. Unfortunately JAMStack falls into this category, as you need to create a custom integration to gain access to your `,(0,e.jsx)(n.code,{children:"CONTENT_API_KEY"}),`. In order to get this you'd have to go with their creator option at $25 a month.`]}),` `,(0,e.jsxs)(n.p,{children:[`Your other option is to self-host. `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/hosting/",children:"Ghost has some great documentation on how to do this"}),` using a variety of avenues. Your mileage may vary.`]}),` `,(0,e.jsxs)(n.p,{children:[`Regardless of which choice you go with, you're going to want to make sure that you supply your NextJS app with the production `,(0,e.jsx)(n.code,{children:"GHOST_API_URL"}),` and `,(0,e.jsx)(n.code,{children:"GHOST_CONTENT_API_KEY"}),` values. These can be found in your production instance of Ghost once you deploy.`]}),` `,(0,e.jsxs)(n.h2,{id:"conclusion",children:[(0,e.jsx)(n.a,{className:"anchor",href:"#conclusion",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Conclusion"]}),` `,(0,e.jsxs)(n.p,{children:[`I hope you found this article helpful. I've been experimenting with Ghost a lot in the last few weeks and I hope to continue to build out my site to support some of its awesome features. Next I'll be writing up a tactic for integrating your JAMStack with `,(0,e.jsx)(n.a,{href:"https://ghost.org/docs/members/",children:"Ghost's Members feature"}),`, so stay tuned for that! And as always, if you have questions feel free to reach out on `,(0,e.jsx)(n.a,{href:"https://twitter.com/jakewies",children:"Twitter"}),"."]}),` `,(0,e.jsx)(n.p,{children:"Happy coding \u26A1\uFE0F"})]});return s?(0,e.jsx)(s,Object.assign({},a,{children:t})):t}var w=f;return b;})(); ;return Component.default;