Functions of the Next.JS to make static sites.

• getStaticPaths()
• getStaticProps()

Trying to break down how Next.JS builds the post from the WordPress CMS. if a CMS has say 100 posts, how Next queries the CMS to get the number of post and the post information. GraphQL nodes like node.content and node.title, node.id, node.slug.

Simple diagram showing the relationship of Next.JS with the headless WordPress CMS building pages into the .next folder.

Animation of how Next builds several pages from a query from CMS source. Next looks at getStaticPaths and queries all post getting their ids and returns it as an array. That array is then looped through where the id is used as a parameter in the getStaticProps(), which then queries using the id to get the individual post data. that data is then used the Post Component.

In Gatsby build the gatsby-node.js file is where the queries for the post are done, that can be a bit different to the Next.JS way of building .

getStaticPaths()

export async function getStaticPaths() {
  const allPosts = await getAllPostsWithSlug()

  return {
    paths: allPosts.edges.map(({ node }) => `/posts/${node.slug}`) || [],
    fallback: true,
  }
}

getStaticProps()

export async function getStaticProps({ params, preview = false, previewData }) {
  const data = await getPostAndMorePosts(params.slug, preview, previewData)

  return {
    props: {
      preview,
      post: data.post,
      posts: data.posts,
    },
  }
}