Dynamic content / Static route / Static page

We all love our static pages, so fast, so performant. However, the stale and outdated content can hurt us. Luckily for us, Next.js + a CMS solves this problem for us. Out landing page for Known is using hardcoded content from default props, gross. Lets fix this to pull content from our CMS.

Our CMS

If you look in the ./content.ts file, you'll see some mock content. That's our CMS! At the end of the day, a CMS is going to give you JSON from an API or Git and Next.js does not descriminate when it comes to where you fetch your data from.

Static props

Using Next.js's getStaticProps server side function, we can inject our content from our CMS into our landing page.

import { home } from '../content'

// at the bottom
export function getStaticProps() {
  return { props: { content: home.published } }
}

That's all to it. Again, you can make a call to any API / CMS in getStaticProps and return content as props here. We'll return our published content for now, until we cover previews. Start the app if you have't already:

yarn dev

npm run dev

You should see some new content on the landing page that matches the published content from our CMS.