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

// 🙎‍♂️ Yuji Tsuburaya📆 May 12, 2020🔖 Notion BlogNotion

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

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

雑に解説しておくと、

  1. slug.tsx で、前の記事と次の記事のリンクとタイトルを取得
  2. それを元に navLink オブジェクトを生成して、自前で作った NavLink コンポーネントの props として渡す
  3. いい感じにレンダリング

ってことをしました。前の記事と次の記事のリンクとタイトルを取得するのは以下のようなコードでやっています。(詳しくは動画を見れば分かると思います。)

// 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 までお気軽にどうぞ。

広告

書いた人

___35d

Yuji Tsuburaya (@___35d

👩‍💻 Frontend Engineer

🏢 J-CAT CTO Co-Founder / ex. BizReach

🎨 by @ch1ch1ch1_123

💚 Minimalism / Notion / Figma

📱 Author of @FastNotion

広告