感想
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一強になることが避けられないかもしれません。
