Creating the Single Post Pages – Next.js + Headless WordPress [part 9]

Welcome to part 9 of our tutorial series on creating a Next.js website with Headless WordPress. In this installment, we will focus on creating the single post pages for our website.

Setting up the Single Post Pages

First, let’s create a new file in our pages directory called post.js. This will be the template for our single post pages. In this file, we will use the getStaticProps function to fetch the post data from our Headless WordPress site and pass it as props to the post component.

      
        import { useRouter } from 'next/router'
        import { getPostBySlug, getAllPosts } from '../../lib/api'

        export async function getStaticProps({ params }) {
          const post = await getPostBySlug(params.slug)
          return {
            props: {
              post,
            },
          }
        }

        export async function getStaticPaths() {
          const posts = await getAllPosts();
          return {
            paths: posts.map((post) => {
              return {
                params: { slug: post.slug },
              }
            }),
            fallback: false,
          }
        }

        export default function Post({ post }) {
          return (
            <>
              <h1>{post.title}</h1>
              <div dangerouslySetInnerHTML={{ __html: post.content }} />
            <>
          )
        }
      
    

Linking to Single Post Pages

Now that we have our post template set up, we can link to the single post pages from our list of posts. In our index.js file, we can add links to each post that take the user to the corresponding single post page. We can use the Link component from Next.js to create these links.

      
        import Link from 'next/link'
        import { getAllPosts } from '../lib/api'

        export default function Home({ posts }) {
          return (
            <>
              <h1>Latest Posts</h1>
              <ul>
                {posts.map((post) => (
                  <li key={post.slug}>
                    <Link href={`/post/${post.slug}`}>
                      <a>{post.title}</a>
                    </Link>
                  </li>
                ))}
              </ul>
            <>
          )
        }

        export async function getStaticProps() {
          const posts = await getAllPosts()
          return {
            props: {
              posts,
            },
          }
        }
      
    

Conclusion

With our single post pages set up, users can now view individual posts on our Next.js website. In the next part of this series, we will look at adding additional features to our website, such as comments and related posts.