LoginSignup
0

More than 1 year has passed since last update.

Next.jsで「前の記事」「次の記事」を実装

Last updated at Posted at 2022-03-25

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

前提

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の前後記事リンクの情報があまり落ちていなかったので、
下記の記事には本当に助けていただきました。
ありがとうございます。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0