Next.js

Next.jsは、Node.js上に構築されたオープンソースのWebアプリケーションフレームワークであり、サーバーサイドスクリプトや静的Webサイトの生成などの、ReactベースのWebアプリケーション機能を有効にする。

1. 概要
-----

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

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

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

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

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

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

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

1.3. 開発元とサポート
-------------

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

2. 歴史
-----

Next.jsは、 2016にGitHubでオープンソースプロジェクトとして最初にリリースされた。もともとは6つの原則に基づいて開発された、セットアップを必要としないすぐに使える機能、どこでもJavaScript、すべての機能はJavaScriptで記述され、自動コード分割とサーバーレンダリング、構成可能なデータフェッチ、リクエストの予測、簡素化展開している。

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

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

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

2022年10月26日、VercelはNext.js 13をリリースした。このメジャーリリースでは、Layouts、Reactサーバーコンポーネント、ストリーミング、および新しい一連のデータフェッチメソッドのサポートを含む//app// ディレクトリが追加され、新しいルーティングパターンがもたらされた。Vercelは、Turbopack、Turborepo、およびTurboエンジンをリリースした。メジャーリリースには、Next.js APIに対する多くの追加の変更も含まれているが、最も注目すべきは、新しい@next/fontライブラリの導入、next/imageへの変更、およびnext/linkへの拡張である。

3. スタイリングと機能
------------

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

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

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

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

4. 脚注
-----

5. 関連項目
-------

Angular
Gatsby
LAMP
React
Nuxt.js
Vue.js
JavaScriptフレームワーク

6. 外部リンク
--------