今後も使いそうなので、忘れないようにメモとして残しておきます。

前提

Next.js
TypeScript
GraphQL

前後記事へのリンクを作成

前後記事へのリンクは[slug].tsx(または[id].tsx)にgetStaticProps内に追記していきます。

[slug].tsx

export async function getStaticProps({ params }) {
  
  // データ取得部分は割愛
  // const { data } = await... 

  // 全ページを取得
  const allPosts = data.posts

  // 現在のページを取得
  const currentPost = allPosts.find((data) => data.slug === params.slug)

  // 現在のページ番号を取得
  const postNum = allPosts.indexOf(currentPost)

  // 現在のページの1つ前のページを取得
  const prevPost = postNum === allPosts.length - 1 ? null : allPosts[postNum + 1]

  // 現在のページの1つ後のページを取得
  const nextPost = postNum === 0 ? null : allPosts[postNum - 1]

  return {
    props: {
      posts: data.posts,
      prevPost,
      nextPost,
    },
  }
}

前後記事へのリンクを作成

前後記事へのリンクは下記のようにすると作成できます。

[slug].tsx

{prevPost && (
  <Link href={`/posts/${prevPost.slug}`}>
    <a>
      BACK
      <span>{prevPost.title}</span>
    </a>
  </Link>
)}
{nextPost && (
  <Link href={`/posts/${nextPost.slug}`}>
    <a>
      NEXT
      <span>{nextPost.title}</span>
    </a>
  </Link>
)}

Next.jsの前後記事リンクの情報があまり落ちていなかったので、
下記の記事には本当に助けていただきました。
ありがとうございます。

この記事は以下の情報を参考にして執筆しました。

Next.js - チュートリアル後