Next.js

Next.js（ネクストジェイエス）は、Node.js上に構築されたオープンソースのWebアプリケーションフレームワークであり、サーバーサイドスクリプトや静的Webサイトの生成などの、ReactベースのWebアプリケーション開発を提供する。

Next.js

Next.jsのロゴ
作者	Guillermo Rauch[1]
開発元	Vercel and open-source community[2]
初版	2016年10月25日 (8年前) (2016-10-25)[3]
最新版	15.3.1[4]  / 2025年4月17日 (12日前)
リポジトリ	github.com/vercel/next.js
プログラミング 言語	JavaScript TypeScript Rust
プラットフォーム	ウェブプラットフォーム（英語版）
サイズ	86.4 MB
種別	Webアプリケーションフレームワーク
ライセンス	MIT License
公式サイト	nextjs.org

概要

Reactのドキュメントには、「Node.jsを使用してサーバー側でレンダリングされたWebサイトを構築する」際の解決策として、開発者にアドバイスする「推奨ツールチェーン」の中でNext.jsが記載されている^[5]。

従来のJavaScriptではWebアプリケーションの開発が困難なので、Reactが使われるようになった。従来のReactアプリはクライアント側のブラウザでのみコンテンツをレンダリングできるが、Next.jsはこの機能を拡張して、サーバー側でレンダリングされるアプリケーションが含まれる。これを一般的にはプリレンダリングといい、Next.jsではサーバーサイドレンダリング（SSR）と静的サイトジェネレーター（SSG）という。Reactではこのプリレンダリングが出来ずに、最初の表示画面が白くなりNext.jsよりも速度が遅くなるために、検索エンジン最適化（SEO）など速度を重視する観点から、Next.jsが有利になる。

Next.jsはReactのフレームワーク

Next.jsは、サーバサイドスクリプトや静的Webサイトの生成など、いくつかの追加機能を有効にするReactのフレームワークである^[6]。 Reactは、JavaScriptを使用してクライアントのブラウザでレンダリングされるWebアプリケーションを構築するために従来から使用されているJavaScriptライブラリである^[7]。 ただし、開発者は、JavaScriptにアクセスできない、またはJavaScriptを無効にしているユーザーに対応していない、潜在的なセキュリティの問題、ページの読み込み時間が大幅に延長されている、サイトの検索エンジン最適化全体に悪影響を与える可能性があるなど、この戦略に関するいくつかの問題を認識している^[7]。

Next.jsなどのフレームワークは、クライアントに送信する前にWebサイトの一部またはすべてをサーバー側でレンダリングできるようにすることで、これらの問題を回避できる^[7][8]。Next.jsは、Reactで最も人気のあるフレームワークの1つである^[9]。これは、新しいアプリを起動するときに利用できるいくつかの推奨される「ツールチェーン」の1つであり、すべてが一般的なタスクを支援するための抽象化レイヤーを提供している^[10]。 Next.jsにはNode.jsが必要であり、 npmを使用して初期化できる。

Next.jsに寄付や使用しているユーザー

GoogleはNext.jsプロジェクトに寄付し、2019年に43件のプルリクエストを提供した。これらのリクエストは、未使用のJavaScriptの削除、読み込み時間の短縮、改善された指標の追加に役に立った^[11]。2020年3月の時点で、フレームワークはNetflix、GitHub、Uber、Ticketmaster、 Starbucksなどの多くの大規模なWebサイトで使用されている^[7]。世界ではNext.jsで、日本ではVue.jsの日本語の説明が多いなどのためか、Next.jsの影響を受けたNuxt.jsの使用が多いと言われている。

開発元とサポート

Next.jsの著作権と商標は、民間企業のVercel（以前はZEIT）が所有しており^[12]、オープンソース開発も維持および主導している^[13]。2020年の初めに、Vercelがソフトウェアの改善をサポートするためにシリーズAの資金で2,100万ドルを確保したことが発表された^[14]。Next.jsの作者であるGuillermo Rauchは、現在VercelのCEOであり、プロジェクトの主任開発者はTim Neutkensである^[15]。VercelではNext.jsなどをGitHubなどで一般公開が出来るデプロイや、テンプレートをクローンすることが出来る無償と有償のホスティングサービスなどを提供している。

歴史

Next.jsは、 2016年10月25日 (8年前) (2016-10-25)にGitHubでオープンソースプロジェクトとして最初にリリースされた^[16]。セットアップを必要としないすぐに使える機能、JavaScriptのみで記述しすべてが関数として動作すること、自動コード分割とサーバーレンダリング、開発者によるデータフェッチ、リクエストの予測、簡素なデプロイという6つの原則に基づいて開発された^[17]。

Next.js 2.0は、2017年3月に発表された。これには、小さなWebサイトでの作業を容易にするいくつかの改善が含まれている。また、ビルド効率が向上し、ホットモジュール交換機能のスケーラビリティが向上した^[18]。バージョン7.0は2018年9月にリリースされ、エラー処理、動的ルート処理が改善され、ReactのコンテキストAPIがサポートされた。これは、 webpack4にアップグレードした最初のバージョンでもある^[19]。バージョン8.0は2019年2月にリリースされ、アプリケーションのサーバーレスデプロイメントを提供する最初のバージョンであり、コードはオンデマンドで実行されるラムダ関数に分割されている。このバージョンでは、静的エクスポートに必要な時間とリソースも削減され、プリフェッチのパフォーマンスが向上した^[20]。

2020年3月に発表されたNext.js 9.3には、さまざまな最適化とグローバルなSassおよびCSSモジュールのサポートが含まれていた^[21]。2020年7月27日に、Next.js 9.5が発表され、インクリメンタル静的再生成、書き換え、リダイレクトサポートなどの新機能が追加された^[22] 。2021年6月15日、Next.js 11がリリースされ、 Webpack5のサポート、リアルタイムのコラボレーティブコーディング機能「Next.js Live」のプレビュー、Create React AppからNext.jsへの自動変換の実験機能「Create React App Migration」が導入された^[23]。2021年10月26日に、Next.js 12がリリースされ、Rustコンパイラが追加され、コンパイルが高速化され、 AVIFサポート、Edge FunctionsとMiddleware、Native ESM、およびURLインポートが追加された^[24]。

2022年9月2日、VercelはNext.jsの新しいロゴを、2022年10月25日開催の第3回Next.js Confに先立ち披露した^[25]。

2022年10月26日、VercelはNext.js 13をリリースした。このメジャーリリースでは、Layouts、Reactサーバーコンポーネント、ストリーミング、および新しい一連のデータフェッチメソッドのサポートを含むApp Routerが追加され、新しいルーティングパターンがもたらされた^[26]。Vercelは、Turbopack（Webpack の後継）、Turborepo（インクリメンタル ビルド システム）、およびTurboエンジン（低レベルのインクリメンタル計算およびメモ化エンジン）をリリースした^[27]。メジャーリリースには、Next.js APIに対する多くの追加の変更も含まれている上に、新しい@next/fontライブラリの導入、next/imageへの変更、およびnext/linkへの拡張も含まれる^[28]。

スタイリングと機能

Next.jsは、 CSSだけでなく、プリコンパイルされるScssとSass 、 CSS-in-JS 、およびstyled-jsxを使用したスタイリングをサポートしている^[10]。更に、 TypeScriptのサポートとスマートバンドルが構築されている^[29]。オープンソースのトランスパイラーBabelは、コードをブラウザーで使用できるJavaScriptに変換およびコンパイルするために使用されている。後でモジュールをバンドルするために、別のオープンソースツールであるWebpackが使用される。これらのツールはすべて、ターミナルのnpmで使用する^[11]。

Next.jsの主な機能は、サーバー側のレンダリングを使用してWebブラウザーの負担を軽減し、セキュリティを強化することである^[要出典] 。これは、アプリケーションの任意の部分またはプロジェクト全体に対して実行できるため、コンテンツが豊富なページをサーバー側のレンダリング用に選択できる^[7]。また、サイトのアセットをまだダウンロードしていないWebブラウザーの負担を軽減するために、初めての訪問者に対してのみ実行できる^[8]。

「ホットリロード」機能は、変更が加えられたときにそれを検出し、適切なページを再レンダリングするため、サーバーを再起動する必要はない。これにより、アプリケーションコードに加えられた変更をすぐにウェブブラウザに反映できるが、一部のブラウザではページを更新する必要がある^[7]。Next.jsは、開発者の便宜のためにページベースのルーティングを使用し、動的ルーティングのサポートを含んでいる。その他の機能には、モジュールをライブで交換できるホットモジュール交換、ページの読み込みに必要なコードのみを含む自動コード分割、読み込み時間を短縮するためのページのプリフェッチなどがある^[7]。

Next.jsは、インクリメンタル静的再生成（ISR）^[30] および静的サイト生成（SSG）もサポートする - Webサイトのコンパイル済みバージョンは、通常、ビルド時にビルドされ、.nextフォルダーとして保存される。ユーザーがリクエストを行うと、静的HTMLページであるビルド済みバージョンがキャッシュされて送信される。これにより、読み込み時間が非常に速くなるが、頻繁に変更され、多くのユーザー入力を利用するインタラクティブなサイトには適さないため、すべてのWebサイトに適しているわけではない。