雰囲気でコードを改修するのではなく,ちゃんとチュートリアルをやったほうがいいよという話。

本ブログサイトにRSSを追加したいなぁと思い,Next.jsで動的にRSSフィードを生成する|catnose を見つけてやってみたんだけど全然動かない。。。色々ググって違う方法も試してみたんだけど全然だめ。
という挫折を味わい諦めてチュートリアルからやり直すことにする。(最初に書いたとおりこの方法が最善。)

大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita を見つけて和訳記事と本家サイト( https://nextjs.org/learn )を並行で読む。
ゼロからブログサイトを作るという構成になっていて今の自分にもってこいの内容。

といったようなことを一通り学ぶことができる。
もちろんチュートリアルで全部を学ぶことはできないので,この詳細はマニュアル読んでねとリンクが張ってある。
うーん,Next.js のチュートリアル良くできてるなぁ。

本家のチュートリアルでは随所にクイズがあり,理解度を確認してくれるので本家も見るのがおすすめ。

1・2問間違えたけど「I just got 550 points✨ on https://nextjs.org/learn https://twitter.com/vercelより」を頂き無事に完走。


チュートリアルを終えたのでいよいよ本題のRSSページ追加。
本ブログサイトは https://github.com/unix/unix.bio をforkして作っているので,チュートリアルで作ったサイトとは構成が違う。
各記事をMDXフォーマットで書いていて,それぞれにmetaを書いてる,こんな感じ。

export const meta = {
  title: 'ブログサイトにRSSを追加しました',
  date: '2021-05-30T00:00:00.000Z',
  description: '',
  image: '',
}

各ページの meta 情報を集めて metadata.json が出力されるようになっているので,それをデータとして getServerSideProps で RSS ページを生成するようにした。

まだRSSページ内のコンテンツ部分が空だったり,sitemap.xml を nextjs-sitemap-generator で生成しているのでRSSと同様の方法に変更したいなど次にやりたいことも見えてきた。

https://oikawa.dev/feed から購読できます。

横浜 赤レンガ