Published on

ブログサイトにRSSを追加しました

Authors

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

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

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

  • Next.js には SG(Static Generation)・SSR(Server Side Rendering) があって,できるだけ SG でやったほうがいい。
  • SG をやるには getStaticProps を使う。
  • 外部データを使う場合は SSR になるので,getServerSideProps を使う。

といったようなことを一通り学ぶことができる。
もちろんチュートリアルで全部を学ぶことはできないので,この詳細はマニュアル読んでねとリンクが張ってある。
うーん,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 を書いてる,こんな感じ。

---

title: 'ブログサイトに RSS を追加しました'
date: '2021-05-30T00:00:00.000Z'


}

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

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

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

横浜 赤レンガ