GatsbyJSで作ったホームページをNext.jsへ書き換えた

感想

3年半前、Next.jsのメンテナはあまりコミュニティのフィードバックを受け入れず、親切ではありませんでした。ドキュメントも充実ではなく、問題があったらソースコードを読む必要がありました。その上、Next.jsがデフォルトでSSR（サーバーサイドレンダリング）しているので、サポートしていないライブラリが多く、FOUC（Flash of unstyled content）問題が深刻でした。例えば有名なmaterial-uiも開発者が簡単にNext.jsと一緒にうまく使えず、自分がNext.jsとmaterial-uiをSSRできるように、ライブラリも作りました。 https://github.com/thundermiracle/next-mui-helper

その時、GatsbyJSに出会いました。Jamstack、GraphQL、綺麗なドキュメントサイト、大量なStarterプロジェクト、すごく書きやすい導入しやすいプラグインエコシステム、レスポンシブのイメージの処理まで自動でやってくれるGatsbyJSがとても魅力的でした。React.jsのドキュメントサイト、Redux作者のDanさんのブログもGatsbyJSを採用しました。

しかし、時代は時代、Next.jsのパクりが多いと言われながら、今もうNext.jsが方が圧倒的に人気で使いやすいです。残念ですが、これからReact領域に入りたい方にGatsbyJSの勉強をあまりお勧めできません。

自分のホームページもGatsbyJSからNext.jsに移行しました。GatsbyJSが元々Next.jsとやや互角だったが、昔と今を比較してみようと思います。

3年半前の比較

	GatsbyJS	Next.js	GatsbyJSの説明	Next.jsの説明
ブログ、ドキュメントサイトの作りやすさ	◎	×	そもそもStaticサイトのために誕生されたフレームワーク	getInitialPropsしかなく、Jamstackに相性が悪い
i18n（多言語サポート）	○	×	コミュニティのプラグインで簡単に作れる	pathベースの多言語をサポートしていなく、 react-intlを使えば一応作れる
イメージの自動処理	◎	×	オフィシャルのプラグインでレスポンシブまで自動対応	方法がない
サイトのスピード	◎	△	Static Htmlなので早いのが当然	next exportがあるが基本的にSSRが必要
デプロイしやすさ	◎	△	Static Htmlなのでどこでも簡単でできる	SSRなので、now(今のVercel)以外は難あり
入門難易度	△	△	GraphQLに詳しくない人にとって多少難しい	わかりやすいがSSRの対応が地獄
コミュニティへの親切さ	◎	×	親切、質問でもちゃんと答えてくれる	未回答でただclosedになっているissueが目立つ
ドキュメントのわかりやすさ	◎	×	ドキュメントサイトが綺麗にメンテされている	README.mdしかない（一応learn nextのサイトがあるが）

今の比較

	GatsbyJS	Next.js	GatsbyJSの説明	Next.jsの説明
ブログ、ドキュメントサイトの作りやすさ	○	◎	staticの部分は前と変わらないが、ページが増えれば増えるほど、ビルド時間が長くなる	getStaticPaths、getStaticPropsがあり、on-demand ISRもあるのでとても使いやすい
i18n（多言語サポート）	○	◎	コミュニティのプラグインで簡単に作れる	オフィシャルサポート
イメージの自動処理	○	◎	相変わらず自動対応だが、増えれば増えるほど、ビルド時間が長くなる	next/imageが優秀
サイトのスピード	◎	◎	Static Htmlなので早いのが当然	SSRだが、かなり改善されてきた
デプロイしやすさ	◎	○	Static Htmlなのでどこでも簡単でできる	Edge FunctionとServerless Functionの普及でデプロイしやすくなってきた
入門難易度	△	○	GraphQLに詳しくない人にとって多少難しい	SSRのサンプルが多く、もう難しくない
コミュニティへの親切さ	○	○	コミュニティのStarterをドキュメントサイトから除外する決定は本当にダメだった	Vercelのプロジェクトになったためやはり変わった
ドキュメントのわかりやすさ	◎	◎	ドキュメントサイトが綺麗にメンテされている	ドキュメントサイトが綺麗、何よりサンプルが多くてキャッチアップしやすい
pnpmのサポート	△	◎	コミュニティ制のよく動かないプラグインがある	オフィシャルサポート

結論

それ以外、Next.jsがRemixからLayouts RFCをパクリ、買収したTurborepoを加えて、Webpackと対応するバンドルツールTurbopackまで手を伸ばしています。元々のNext.js, GatsbyJS, create-react-appの互いに張り合っている時代が過ぎ去り、今後Next.js一強になることが避けられないかもしれません。