今後も使いそうなので、忘れないようにメモとして残しておきます。
前提
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の前後記事リンクの情報があまり落ちていなかったので、
下記の記事には本当に助けていただきました。
ありがとうございます。
この記事は以下の情報を参考にして執筆しました。