done is better than perfect

自分が学んだことや、作成したプログラムの記事を書きます。すべての記載は他に定める場合を除き個人的なものです。

Next.js + Vercelでまとめサイトのまとめもどきを作ってみた。

f:id:thekoruku:20200429153740j:plain

TL;DR

mm2mm: Yet Another まとめサイト

使った技術スタックとしては以下です。

  • Next.js
  • Vercel (最初はNetlify使おうとしたのですが、後述する理由でやめました。)
  • Bootstrap 5

フロントエンドと私

今までインフラ系エンジニアとして働いていたのですが、フロントエンドには苦手意識しかなかったです。

何故か。美的センスがゼロに等しいので・・・

ただまあ、フロントエンドの技術自体は結構面白いなーと思っていたし、わかりやすく成果を示せるのでいつか作ってみたいと思っていました。

JavaScriptもNext.jsもVercelも何もわからん状態から始めたので結構時間かかりましたが、最低限の機能(RSS取ってきて表示しているだけですが)ができたので、公開してみます。

まとめサイトのまとめと私

2chまとめ系サイトが結構好きで、よくサーフィンしていました。こういうの、いつか作ってみたいと思っていたのでやってみました。

Next.jsとVercelと私

なんとなく最近よく聞くなーというくらいの雑な選定基準でNext.jsを選びました。 SSRだのISRだのよくわからん・・・という状態から始めたので結構ハマりました。

  • 定期的にRSSを取得して、勝手に更新するサイトにしたい
  • あれ、サーバーサイドレンダリングだと、一度Staticなファイル作っちゃうとその後更新されないのでは?
  • あれ、ISRなるものがあるらしい。これで勝つる!
  • よっしゃ、できたので Netlify にデプロイだ!
  • あれ、思ったように更新されない・・・
  • ISRはNetlify で使えない・・・だと・・・ (https://github.com/netlify/netlify-plugin-nextjs/issues/151 . experimentalなプラグイン入れればできるのかもだがよくわからん)
  • やむなし、Next.js 開発元のVercelだと動くっぽいし、これでいいか・・・
  • なんとなく動いた(←今ここ)

こんなグダグダ感。

今後について

Next.jsやってみたいから、これだけでRSS取得→整形→表示までやっていますが、正直若干失敗したと思っていて、RSSを取得する部分は別出しにするべきでした。

なぜかというと、今のままだと更新のたびにRSS取りに行ってしまうので、効率悪い気がしているためです。

素直に、RSSのリストをもとにクロールするスクリプトを別に書いて、その情報をRDBにでも入れておいて、Next.jsはそのRDBを見に行くほうが良かったかなと考えています。

まあ、Next.jsしか使ってないから(ほぼ)無料でサイト作れているので、とりあえずそこは良かったかなと思いますが。 今後暇を見て更新しようかなと思いますが、気がついたらぜんぜん違うサイトになっているかもしれない。