Next.js と Gatsby の比較

2020/05/20JavaScript JAMstack SSG React Next.js Gatsby

最近 React ベースのフレームワークである Next.js と Gatsby を使っています。ある程度客観的に比較できるだけの知識がたまったと思うので Next.js と Gatsby の比較情報をまとめてみました。

どちらを使うか・学ぶか迷っている方のご参考になれば幸いです。ただし、あくまで私が知る範囲での説明であり 100% の正確さを保証するものではないのでその点ご留意ください。

尚、本記事は Next.js と Gatsby が以下のバージョンが最新のときに書いています。いずれも活発に開発が進められており、バージョンが進むとあてはまらなくなる記述も出てくるものと思います。

Next.js 9.4.1
Gatsby 2.22.3

「そもそもスタティックサイトジェネレーターって何？」「 JAMstack って何？」という方には、別ブログの記事ですが次の記事がご参考になると思います。

最初にそれぞれの説明をした後に統計情報を見てから両者の共通点と相違点を述べていきます。

Next.js とは

Next.js

Next.js は React ベースのフレームワークです。 Next.js を使えば React ベースの高品質なウェブサイト・ウェブアプリケーションを効率的に構築することができます。

React を利用する際によく必要になるバンドル機能・コンパイル機能・ルーティング機能等を内蔵しており、所定のディレクトリ構造に従ってファイルを設置するだけで SPA 風のウェブサイト・ウェブアプリケーションをかんたんに作成できます。プリレンダリング方式として SSG （スタティックサイトジェネレーション）と SSR （サーバーサイドレンダリング）をサポートしており、要件に合わせて SSG と SSR を使い分けることができます。

Next.js の公式サイトでは次のように説明されています。

Next.js: The React Framework
Enter Next.js, the React Framework. Next.js provides a solution to all of the above problems. But more importantly, it puts you and your team in the pit of success when building React applications.
Next.js has the best-in-class “Developer Experience” and many built-in features; a sample of them are:
An intuitive page-based routing system (with support for dynamic routes)
Pre-rendering, both static generation (SSG) and server-side rendering (SSR) are supported on a per-page basis
Automatic code splitting for faster page loads
Client-side routing with optimized prefetching
Built-in CSS and Sass support, and support for any CSS-in-JS library
Development environment which supports Hot Module Replacement
API routes to build API endpoints with Serverless Functions
Fully extendable

意訳:

Next.js: React フレームワーク
React フレームワークの Next.js を使ってみましょう。 Next.js は上記の問題のすべてに対するソリューションを提供します（訳注 1 ）。もっと重要なことに、 Next.js は React アプリケーションの構築時にあなたやあなたのチームがすんなりと成功できるよう導いてくれます（訳注 2 ）。
Next.js にはクラス最高の DX （開発者体験）と多くの機能が備わっています。いくつか例をあげます:
直感的なページベースのルーティングシステム（ダイナミックルートのサポートあり）
SSG と SSR の両方をサポートしたページベースのプリレンダリング
ページ読み込み速度向上のための自動コード分割
最適化されたプリフェッチ付きのクライアントサイドのルーティング
デフォルトでの CSS と Sass のサポートとその他 CSS-in-JS ライブラリのサポート
HMR （ホットモジュールリプレースメント）をサポートした開発環境
Serverless Functions で API エンドポイントを構築するための API ルート
拡張可能
訳注 1: この「上記の問題」は引用文に含まれていませんが、 React を実際に使うときに必要になる細かなタスク――「 Webpack 等のバンドラーの利用」「最適化のためのコードの分割」「パフォーマンス向上と SEO のための静的ページの生成」「データストア利用のためのサーバーサイドコードの記述」等を行う必要があることを指しています。
訳注 2: いわゆる「 The Pit of Success 」に落とすという表現が使われています。

Next.js

元々は SSR がメインだったようですが、 2020 年 3 月にリリースされたバージョン 9.3 で SSG の機能が本格的に導入され、純粋な SSG （スタティックサイトジェネレーター）としても使えるようになりました。

Blog - Next.js 9.3 | Next.js

ちなみに、 Next.js は OSS （オープンソースソフトウェア）ですが、開発は主に Vercel という会社が行っています（ Vercel は 2020 年 4 月以前は ZEIT という名前でした）。 Vercel は多くの OSS を開発しており、 Electron ベースの Hyper というターミナル等が有名です。

Open Source - Vercel

その他のポイントも含めて Next.js の特徴を箇条書きでまとめます。

利用者が多く、 React ベースの SSR / SSG フレームワークのスタンダードである
自由度が高い
React がわかっていれば学習コストが比較的少ない
Webpack の機能を内包・隠蔽してくれる
SSG も SSR も可能（ただし最近は SSG 押し）
SSR で使える API エンドポイント機能を標準装備
開発企業の公式ホスティングサービスがある

Gatsby とは

Gatsby

Gatsby は React ベースの SSG です。 Gatsby を使うと Rect を使用した高品質なマルチページのウェブサイトをすばやく構築することができます。

Gatsby は Next.js と同様、 React を利用する際によく必要になるバンドル機能・コンパイル機能・ルーティング機能等を内蔵しています。所定の構造でファイルを設置すると自動的にそれらを結びつけてサイトを生成してくれます。

SSG としての Gatsby の特徴は大きく 4 つあります。

React
GraphQL
プラグインシステム
テーマシステム

Gatsby は React ベースの SSG です。 React の機能や資産をそのまま活用することができます（この点は Next.js も同様です）。

また、 Gatsby では共通の GraphQL インタフェースを介してさまざまなデータソースからコンテンツを取得する仕組みになっています。統一された GraphQL インタフェースを用いることにより、さまざまなデータソース（主に CMS ）からコンテンツを抽出する処理を手軽に再利用できるようになっています。

Gatsby には CMS によくあるようなプラグインシステムが備わっています。これはプラグインという形で必要な機能をかんたんに追加できる仕組みです。プラグインに相当するパッケージを npm や yarn でダウンロードして設定ファイルに少しの設定を書き込むだけで、さまざまな機能をすぐに導入することができます。

Gatsby にはプラグインシステムと似た仕組みとしてテーマシステムも備わっています。テーマシステムはサイト全体のページ構成とページの中身をテーマという形で再利用できる仕組みです。 CMS でよくあるようにテーマには親子関係を持たせることができ、親テーマを部分的に上書き・カスタマイズすることが可能です。

Gatsby 公式のプラグインリストには記事執筆時でおよそ 2,000 個のプラグインが掲載されています。 Gatsby のプラグインとテーマは旧来の CMS のものとよく似ているので、 CMS に馴染みのある方には直感的にわかりやすいと思います。

Gatsby の公式サイトでは Gatsby について次のように説明されています。

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

意訳:

Gatsby は React ベースのフリーでオープンソースのフレームワークです。開発者が爆速のウェブサイトやアプリを作るのに役立ちます。

GatsbyJS

Gatsby も Next.js と同じく OSS ですが、開発は主に同名の Gatsby 社が行っています。

Gatsby Cloud

その他のポイントも含めて Gatsby の特徴を箇条書きでまとめます。

メジャーだけど Next.js に比べるとマイナー
Next.js に比べると最初の学習コストが高い
ただし既存のテーマとスターターをそのまま使うのであれば導入はすぐにできる
Webpack の機能を内包している
コンテンツは GraphQL インタフェースを介して取得する
純粋な SSG である（ SSR は行わない）
SSG としての個性は強め
プラグインが豊富
CMS でよくあるテーマシステムがある
開発企業の公式ホスティングサービスがある

それぞれの説明は以上です。

Next.js と Gatsby の利用数

Next.js と Gatsby の利用数を見てみます。

	Next.js	Gatsby
GitHub でのスター数	4.8 万	4.4 万
GitHub でのフォーク数	7,200	8,000
GitHub での Used by 数	8.2 万	19.6 万
npm 週間ダウンロード数	56 万	44 万

両者拮抗しています。手元にデータはありませんが、 Next.js が先に有名になって Gatsby が後から急速に追い上げてきている印象です。

ちなみに、客観的なデータからわかるかぎり 2020 年上半期時点で最も人気の SSG （スタティックサイトジェネレーター）はこの 2 つです（ JavaScript 以外のプログラミング言語のものも含めて）。

続いて両者の共通点と相違点を見ていきます。

Next.js と Gatsby の共通点

両者には次のような点が共通しています。

JavaScript / React ベースの JAMstack フレームワークである
SSG として静的サイトの構築に利用できる
SPA 風のページ遷移をするウェブサイトが少ない工数で構築できる
デフォルトで TypeScript に対応している
ルーティング・ビルド・コード最適化等の機能を内包しており開発者は細かなタスクに煩わされずに済む
ページを .jsx または .tsx で記述できる
特定の企業が主体となって開発している
2020 年時点で活発に開発が行われている
世界的に注目度が高い

Next.js と Gatsby の相違点

Next.js と Gatsby の相違点として次のようなものがあります。

Next.js にあって Gatsby に無いもの

SSR: Next.js は SSG にも SSR にも使えますが、 Gatsby は純粋な SSG であり Gatsby では SSR はできません。そのため、 Next.js は Node サーバーで動かすことで動的な機能を実現できますが、 Gatsby で動的な機能を実現するには外部のサービスや API を利用する必要があります。

Gatsby にあって Next.js に無いもの

GraphQL: Next.js ではデータソースからコンテンツを取得する方法は標準化されていませんが、 Gatsby は統一された GraphQL インタフェースを利用してコンテンツを読み込む仕組みになっています。これにはメリット・デメリットがあり、 Next.js は GraphQL を知らなくても気軽に使えるのがメリットですし、 Gatsby は GraphQL さえ知っていればプラグインを導入するだけでさまざまなデータソースからかんたんにコンテンツを抽出できるメリットがあります。
プラグインシステム: Gatsby には強力なプラグインシステムがあります。プラグインシステムのおかげで、 Gatsby ではサイトマップの生成・ canonical URL の設定・ Google Analytics の導入・ Sentry の導入といった定番の機能をかんたんに導入できます。 Next.js にも機能追加用のパッケージが作られていてそれを利用できますが、 Gatsby ほどかんたんではありません。
テーマシステム: Gatsby には強力なテーマシステムがあります。テーマシステムを使えば、優れたデザインのブログやサイトをすばやく構築することができます。 Next.js には同様のテーマシステムはありません。
豊富なプラグイン: Gatsby には公式・非公式を問わず多くのプラグインが開発・提供されています。公式のプラグイン検索ページのおかげもあり、多くのプラグインが実際に利用されています。 Next.js にも同様の拡張用のパッケージがありますが、 Gatsby のプラグインシステムほど充実はしていません。
img タグの最適化: Gatsby には img タグの最適化機能がデフォルトで備わっています。具体的には、複数のサイズの縮小画像をビルド時に生成して、プログレッシブイメージローディング、レスポンシブイメージローディングを自動で行ってくれます。 Next.js にはデフォルトではその機能はありません。

個人的な印象では、 Gatsby の方が SSG に特化しており SSG として見たときの強力さ・生産性の高さは上だと思います。コミュニティを盛り上げよう・オープンソースのエコシステムを作ろうとする取り組みも Gatsby の方が活発な印象があります。純粋な SSG として使うなら Gatsby の方がよいと考える人が多いのではないでしょうか。

ただし、これはあくまでも個人的な経験であり正確に計測・比較したわけでもないのですが、 Gatsby を使っていて気になる点として、開発サーバーやビルドの処理が少しもっさりしていることがあげられます。画像の最適化あたりの処理に時間がかかるのかもしれませんが、細かいところは調べていません。この点については、 2020 年 4 月に変更箇所がコンテンツだけの場合は差分だけを高速にビルドする incremental builds という機能が実験的に Gatsby に追加されました。この incremental builds で Gatsby のビルドが遅い問題がある程度改善される可能性はあると思います。

What is Gatsby Incremental Builds? | GatsbyJS

共通点と相違点については以上です。細かい部分をあげていくと他にもたくさんあげられそうですが、大きなポイントはこのぐらいでしょうか。

Next.js と Gatsby をどう使い分けるか

Next.js と Gatsby をどう使い分けるか、あるいはどちらか一方を使うとしたらどちらがよいかという問題についてです。最終的には好みの問題なのですが、合目的性や費用対効果を意識して戦略的に導入するならおおよそ次のような感じで使い分けるとよいのではないかと思います。

動的な機能を持たせたい → （ SSR ができる） Next.js
既存のテーマを使って手軽にブログを立ち上げたい → （テーマが使える） Gatsby
GraphQL を使いたい → Gatsby
GraphQL を使いたいとは別に思わない → Next.js
Google Analytics の導入やサイトマップの生成等の細かいタスクを自分ではやりたくない → （プラグインが豊富な） Gatsby
Google Analytics の導入やサイトマップの生成等の細かいタスクも自分でやりたい → Next.js

とはいえ、 SSG として見るなら最終的にできることはどちらも大差無いと思うので、主に好みで決めてしまってもよいかもしれません。

所感

いちユーザーとしての印象では、 Gatsby の方が個性が強く狭い範囲で強烈な強みを発揮するイメージです。 Gatsby はプラグインが豊富で、要件がぴったり合ったときは非常に高い生産性を発揮すると思います。しかし、 Gatsby は Gatsby が用意したレールから外れると途端にややこしさ・煩わしさが非線形的に跳ね上がる感じがします。

他方 Next.js は全方位的というか、よい意味でも悪い意味でもまんべんのない、素直な感じです。 Gatsby ほどの強い個性やポリシーは無いですが、 SSR も SSG もできて守備範囲が広い感じがします。

あとひとつ重要な違いとして、 Next.js を使う場合は必ずカスタムコードを書く必要がありますが、 Gatsby はプラグインやテーマをうまく活用すればブログ程度のサイトならコードをほぼ書かなくてもよいという点もあります。ですので、ターミナルと JavaScript を少し触れるデザイナーの方等がポスト WordPress として自分のブログに使うのであれば Gatsby がおすすめです。

かぎられた範囲での効率の高さと汎用性の高さはしばしばトレードオフの関係にありますが、その点でいえば Gatsby はかぎられた範囲での効率の高さ、 Next.js は汎用性の高さを優先している印象です。その意味でたとえるなら Gatsby は CMS に、 Next.js はウェブアプリケーションフレームワークに似ていると言えます。このたとえはピンと来ない人には伝わらないと思いますが、伝わる人には伝わると思います。

ということで Next.js と Gatsby の比較のお話でした。

参考

ちなみに、英語で書かれたものでよければ Next.js と Gatsby を比較した記事がいくつかあるので、興味のある方は検索してみるとよいと思います。ただし、古い記事だと Next.js の SSG 機能が不完全だった頃の Next.js と Gatsby を比較しているので参考にする際は注意してください。私が目を通した中では次の記事がおすすめです。

Next.js vs. GatsbyJS: A developer’s perspective - LogRocket Blog

また、冒頭でも述べましたが、 Next.js も Gatsby も開発が非常に活発で進化が早いので、 1 年以内に本記事の説明があてはまらなくなる可能性も高いと思います。ご注意ください。

もうひとつちなみに、 Gatsby が公式に Gatsby と Next.js の比較表を作っているので、興味のある方は見てみてください。 Gatsby 公式の表なので全体的に Gatsby 寄りですが、 Next.js のこともわりとちゃんと評価していると思います。

Comparison of Gatsby vs Next.js | GatsbyJS