Next.js

Next.js
The Next.js logo, a stylization of its name
Next.jsのロゴ
作者 Guillermo Rauch[1]
開発元 Vercel and open-source community[2]
初版 2016年10月25日 (8年前) (2016-10-25)[3]
最新版
14.1.0 / 2024年1月18日 (10か月前) (2024-01-18)
最新評価版
14.1.1
リポジトリ
ウィキデータを編集
プログラミング
言語
プラットフォーム ウェブプラットフォーム（英語版）
サイズ 86.4 MB
種別 Webアプリケーションフレームワーク
ライセンス MIT License
公式サイト nextjs.org ウィキデータを編集
テンプレートを表示

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

概要

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

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

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

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

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

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

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

開発元とサポート

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

歴史

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

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

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

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

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

スタイリングと機能

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

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

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

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

脚注

  1. ^ “How Next.js aims to simplify front-end development” (英語). TechRepublic (21 April 2020). 2020年10月20日閲覧。
  2. ^ “vercel/next.js”. GitHub. 2019年3月16日時点のオリジナルよりアーカイブ。2019年3月17日閲覧。
  3. ^ “Next.js First Release”. GitHub (2019年3月14日). 2020年10月10日時点のオリジナルよりアーカイブ。2019年3月17日閲覧。
  4. ^ “Create a New React App – React” (英語). reactjs.org. p. 4. 2022年6月30日閲覧。
  5. ^ “Differences Between Static Generated Sites And Server-Side Rendered Apps” (英語). Smashing Magazine (2020年7月2日). 2020年10月19日閲覧。
  6. ^ a b c d e f g Thakkar, Mohit (2020), Thakkar, Mohit, ed., “Next.js” (英語), Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (Berkeley, CA: Apress): 93–137, doi:10.1007/978-1-4842-5869-9_3, ISBN 978-1-4842-5869-9, https://doi.org/10.1007/978-1-4842-5869-9_3 2020年10月20日閲覧。 
  7. ^ a b Thakkar, Mohit (2020), Thakkar, Mohit, ed., “Adding Server-Side Rendering to Your React Application” (英語), Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications (Berkeley, CA: Apress): 139–152, doi:10.1007/978-1-4842-5869-9_4, ISBN 978-1-4842-5869-9, https://doi.org/10.1007/978-1-4842-5869-9_4 2020年10月20日閲覧。 
  8. ^ December 2 (2 December 2019). “Why front-end development may be the new frontier” (英語). TechRepublic. 2020年10月20日閲覧。
  9. ^ a b “Comparing Styling Methods In Next.js” (英語). Smashing Magazine (2020年9月17日). 2020年10月20日閲覧。
  10. ^ a b January 31 (February 2020). “An insider's look at Google's web framework contributions to Next.js and more” (英語). TechRepublic. 2020年10月19日閲覧。
  11. ^ ZEIT is now Vercel, (21 April 2020), https://vercel.com/blog/zeit-is-now-vercel 
  12. ^ “Develop. Preview. Ship. For the best frontend teams – Vercel”. vercel.com. 2021年10月6日時点のオリジナルよりアーカイブ。2020年9月22日閲覧。
  13. ^ “Static site generation with single page app functionality? That's what's coming Next(.js)” (英語). Stack Overflow Blog (2020年10月7日). 2020年10月20日閲覧。
  14. ^ Krill (2016年10月31日). “Next step after Node.js: Framework for 'universal' JavaScript apps” (英語). InfoWorld. 2020年10月20日閲覧。
  15. ^ Krill (2017年3月28日). “Next.js 2.0 plays better with React and JavaScript” (英語). InfoWorld. 2020年10月20日閲覧。
  16. ^ Krill (2018年9月21日). “Next.js 7 framework compiles faster, supports WebAssembly” (英語). InfoWorld. 2020年10月20日閲覧。
  17. ^ Krill (2019年2月14日). “Next.js 8 now supports serverless apps” (英語). InfoWorld. 2020年10月20日閲覧。
  18. ^ Krill (2020年3月12日). “Next.js upgrade emphasizes static site generation” (英語). InfoWorld. 2020年10月20日閲覧。
  19. ^ Krill (July 27, 2020). “Next.js adds incremental static pages regeneration”. InfoWorld. October 2, 2020時点のオリジナルよりアーカイブ。September 22, 2020閲覧。
  20. ^ “Next.js 11”. 2021年7月10日閲覧。
  21. ^ “Next.js 12” (英語). nextjs.org. 2021年10月27日閲覧。
  22. ^ Krill (February 14, 2019). “Next.js 8 now supports serverless apps”. InfoWorld. October 2, 2020時点のオリジナルよりアーカイブ。September 22, 2020閲覧。
  23. ^ “Incremental Static Regeneration with Next.js” (英語). Vercel. 2022年3月6日閲覧。
  24. ^ “At Next.js Conf 2022, learn to build better and scale faster – Vercel” (英語). vercel.com. 2022年11月18日閲覧。
  25. ^ “Next JS : The Game Changing Update - Trango Tech Blog” (英語) (2022年10月26日). 2022年11月18日閲覧。
  26. ^ “chore: proper description of turbo pack by ThePrimeagen · Pull Request #2414 · vercel/turbo” (英語). GitHub. 2022年11月18日閲覧。
  27. ^ “Next.js 13” (英語). nextjs.org. 2022年11月18日閲覧。
  28. ^ Krill, Paul (2019年2月14日). “Next.js 8 now supports serverless apps” (英語). InfoWorld. 2022年6月30日閲覧。
  29. ^ “Incremental Static Regeneration” (英語). Vercel Documentation. 2022年6月30日閲覧。

関連項目

ポータル Free and open-source software
ポータル Free and open-source software

外部リンク