ys memos

Blog

Next.jsでブログ作った


nextjs

2021/05/22


これまで,HUGOでブログを作っていました.これを作ったのが,プログラミングを学び始めたての頃で,すごく嬉しかったという記憶があります.

HUGO には様々なテーマが公開されているので,自分で好きなものを選べたという事が嬉しかった要因の一つでした.


最近,個人では React で Web 開発をすることが多くなりました.

また,HUGO のブログではずっと同じテーマを使っていた上,自分でもっとカスタムしたいという願望がありました.

その上で,普段から使い慣れている React を使いたいと思いました.

一応,HUGO でもReact でフロントを書くことができるそうなのですが,見てもあまり理解できなかったです.

そこで,後々の保守性を考慮し,元々 React を使うことを前提としたものを使おうと思いました.つまり,React 系フレームワークへの移行を決めました.

また,Github Pages でホスティングするのは変えないため,SSG ができるというのが大前提です.

その候補が,以下2つでした.

  • Gatsby
  • Next.js

正直,Gatsby も Next.js も甲乙つけがたかった.

まず前提として,保守性を維持するために React と typescript の環境で作ることを決めた.

最初は,ロゴがおしゃれなので Next.js を使うことにした.その時,公式ページに載っていたブログスターターを使ったところ,謎のエラーとの遭遇や, GetStaticPathsGetStaticPropsが理解できなさすぎて断念した.

そこで,Gatsby を使うことにした.Gatsby は元々 SSG に力を入れているフレームワークということらしく,かなり楽にブログらしいものを作ることが出来た.

ここでは,Gatsby-Starter-Blog-Typescriptを見つけたので,使っていた.

なんやかんやプラグインで解決するという形のようで,かつ,ディレクトリ構造がイマイチ理解できなかったので,断念した.

React の material-ui を導入したが,ページネーションがうまく導入できなかった上,マークダウンをキレイにスタイリングするのも難しかった.

そこで,Next.js に再び戻ってきた.この段階では,まだどちらも候補として考えていた.

Next.js では,よさそうなスターターを見つけたので,ここをベースに始めた.


正直,右往左往してたまたまうまく行ったのが Next.js であったというのが理由としては大きい.

しかし,どちらも最初はうまく行かなかったが Next.js に決めたというのは,内心では Next.js を使いたかったのかもしれない.大体,以下の3点のようなことを考えていた.

  • スキルの応用性が高そう
  • 流行ってそう
  • 好みに改変しやすそう

ただおそらく,これは Gatsby でも構わないのだと思う.


今後,本ブログへの機能追加をやっていきたいと考えています.

また,気が向いたら Next.js でのブログの構築方法等も載せていこうかなと考えています.

関連タグを探す