Gatsbyで前後記事へのナビゲーションを実装する方法

Gatyby

2023.09.222023.03.21

gatsby-node.jsでの設定
1. コードの解説
フロントエンドでのナビゲーション表示
1. コードの解説
GraphQLクエリで記事情報を取得
まとめ

gatsby-node.jsでの設定

まず、gatsby-node.jsに記事の前後関係を取得する処理を追加します。

const posts = result.data.allMarkdownRemark.edges;
posts.forEach((post, index) => {
  // 前後記事
  const previous = index === posts.length - 1 ? null : posts[index + 1].node;
  const next = index === 0 ? null : posts[index - 1].node;

  createPage({
    path: post.node.frontmatter.path,
    component: blogPostTemplate,
    context: {
      slug: post.node.frontmatter.path,
      previous, // 追加
      next, // 追加
    },
  });
});

コードの解説

previousとnext変数を用いて、前後の記事情報を取得しています。
createPage関数で各記事ページを生成し、contextに前後記事の情報を渡します。

フロントエンドでのナビゲーション表示

次に、フロントエンドで記事ページにナビゲーションを表示させる部分を以下のように実装します。

{previous && (
  <Link to={previous.frontmatter.path} rel="prev">
    <span>&laquo; 前の記事</span>
    {previous.frontmatter.title}
  </Link>
)}
</div>
<div className="prev-item">
  {next && (
    <Link to={next.frontmatter.path} rel="next">
      <span>次の記事 &raquo;</span>
      {next.frontmatter.title}
    </Link>
  )}

コードの解説

previousとnext変数が存在する場合、それぞれの記事へのリンクを表示します。

GraphQLクエリで記事情報を取得

最後に、GraphQLクエリで記事の情報を取得します。

export const pageQuery = graphql`
  allMarkdownRemark(limit: 100, sort: {fields: id, order: ASC}, skip: 0) {
    edges {
      node {
        id
        headings {
          value
          depth
        }
        frontmatter {
          date
          path
          title
        }
      }
      next {
        id
      }
    }
  };