Notion Blog に「次の記事 / 前の記事」機能を実装した

📆May 12, 2020🔖 Notion BlogNotion

🐈 「(少しマニアックな)Notion の使い方まとめ」という note マガジンでも、毎週1本 Notion の使い方に関する記事を発信をしています。 もしよければそちらも覗いてみてください。

表題の通りですが、「次の記事 / 前の記事」のリンクを記事下に実装しました。この記事の下にも、「次の記事」と「前の記事」のリンクが付いていると思います。

YouTube で配信しながらやってみたのですが、これがけっこう良かったので、機能追加するときはまたそのうちやってみたいと思います。


雑に解説しておくと、

  • slug.tsx で、前の記事と次の記事のリンクとタイトルを取得
  • それを元に navLink オブジェクトを生成して、自前で作った NavLink コンポーネントの props として渡す
  • いい感じにレンダリング
  • ってことをしました。前の記事と次の記事のリンクとタイトルを取得するのは以下のようなコードでやっています。(詳しくは動画を見れば分かると思います。)

    // unstable_getStaticProps 関数内
    
    const postsTableArray = Object.values(postsTable).filter(post => postIsReady(post))
      let index
      postsTableArray.forEach((post: any, _index) => {
        if (post.Slug === slug) index = _index
      })
    
      const nextPost: any | undefined = postsTableArray[index - 1]
      const prevPost: any | undefined = postsTableArray[index + 1]
    
      const navLink: NavLink = {
        next: {
          title: nextPost && nextPost.Page,
          slug: nextPost && nextPost.Slug,
        },
        prev: {
          title: prevPost && prevPost.Page,
          slug: prevPost && prevPost.Slug,
        },
      }

    みなさまもぜひお試しください。不明点あれば @___35d までお気軽にどうぞ。