コンテンツにスキップ

Next.js

出典: フリー百科事典『ウィキペディア（Wikipedia）』

これはこのページの過去の版です。Elppin (会話 | 投稿記録) による 2022年7月3日 (日) 11:31 （個人設定で未設定ならUTC）時点の版であり、現在の版とは大きく異なる場合があります。

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

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

概要

Reactのドキュメントには、「Node.jsを使用してサーバー側でレンダリングされたWebサイトを構築する」際の解決策として、開発者にアドバイスする「推奨ツールチェーン」の中でNext.jsが記載されている[4]。従来のReactアプリはクライアント側のブラウザでのみコンテンツをレンダリングできるが、Next.jsはこの機能を拡張して、サーバー側でレンダリングされるアプリケーションを含まれる。これを一般的にはプリレンダリングといい、Next.jsではサーバーサイドレンダリング（SSR）と静的サイトジェネレーター（SSG）という。

Next.jsの著作権と商標は、Vercel（以前はZEIT）が所有しており[5]、オープンソース開発も維持および主導している[6]。

Next.jsは、サーバサイドスクリプトや静的Webサイトの生成など、いくつかの追加機能を有効にするReactフレームワークである[7]。 Reactは、JavaScriptを使用してクライアントのブラウザでレンダリングされるWebアプリケーションを構築するために従来から使用されているJavaScriptライブラリである[8]。 ただし、開発者は、JavaScriptにアクセスできない、またはJavaScriptを無効にしているユーザーに対応していない、潜在的なセキュリティの問題、ページの読み込み時間が大幅に延長されている、サイトの検索エンジン最適化全体に悪影響を与える可能性があるなど、この戦略に関するいくつかの問題を認識している[8]。Next.jsなどのフレームワークは、クライアントに送信する前にWebサイトの一部またはすべてをサーバー側でレンダリングできるようにすることで、これらの問題を回避できる[8][9]。Next.jsは、Reactで最も人気のあるフレームワークの1つである[10]。これは、新しいアプリを起動するときに利用できるいくつかの推奨される「ツールチェーン」の1つであり、すべてが一般的なタスクを支援するための抽象化レイヤーを提供している[11]。 Next.jsにはNode.jsが必要であり、 NodePackageManagerを使用して初期化できる。

GoogleはNext.jsプロジェクトに寄付し、2019年に43件のプルリクエストを提供した。これらのリクエストは、未使用のJavaScriptの削除、読み込み時間の短縮、改善された指標の追加に役に立った[12]。2020年3月の時点で、フレームワークはNetflix、GitHub、Uber、Ticketmaster、 Starbucksなどの多くの大規模なWebサイトで使用されている[8]。2020年の初めに、Vercelがソフトウェアの改善をサポートするためにシリーズAの資金で2,100万ドルを確保したことが発表された[13]。 フレームワークの原作者であるGuillermoRauchは、現在VercelのCEOであり、プロジェクトの主任開発者はTimNeutkensである[14]。

開発の歴史

Next.jsは、 2016年10月25日 (8年前) (2016-10-25)にGitHubでオープンソースプロジェクトとして最初にリリースされた[15]。もともとは6つの原則に基づいて開発された、セットアップを必要としないすぐに使える機能、どこでもJavaScript、すべての機能はJavaScriptで記述され、自動コード分割とサーバーレンダリング、構成可能なデータフェッチ、リクエストの予測、簡素化展開している[16]。Next.js 2.0は、2017年3月に発表された。これには、小さなWebサイトでの作業を容易にするいくつかの改善が含まれている。また、ビルド効率が向上し、ホットモジュール交換機能のスケーラビリティが向上した[17]。バージョン7.0は2018年9月にリリースされ、エラー処理が改善され、動的ルート処理が改善されたReactのコンテキストAPIがサポートされた。これは、 webpack4にアップグレードした最初のバージョンでもある[18]。バージョン8.0は2019年2月にリリースされ、アプリケーションのサーバーレスデプロイメントを提供する最初のバージョンであり、コードはオンデマンドで実行されるラムダ関数に分割されている。このバージョンでは、静的エクスポートに必要な時間とリソースも削減され、プリフェッチのパフォーマンスが向上した[19]。 2020年3月に発表されたバージョン9.3には、さまざまな最適化とグローバルなSassおよびCSSモジュールのサポートが含まれていた[20]。2020年7月27日に、Next.jsバージョン9.5が発表され、増分静的再生成、書き換え、リダイレクトサポートなどの新機能が追加された[21] 。2021年6月15日、Next.jsバージョン11がリリースされ、 Webpack5のサポート、リアルタイムのコラボレーティブコーディング機能「Next.jsLive」のプレビュー、CreateReactAppからNext.jsへの自動変換の実験機能が導入された、互換性のあるフォームが「CreateReactAppMigration」 である[22]。2021年10月26日に、Next.js 12がリリースされ、Rustコンパイラが追加され、コンパイルが高速化され、 AVIFサポート、Edge Functions＆Middleware、およびNative ESM＆URLImportsが追加された[23]。

スタイリングと機能

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

Next.jsの主な機能は、サーバー側のレンダリングを使用してWebブラウザーの負担を軽減し、セキュリティを強化することである[要出典] 。これは、アプリケーションの任意の部分またはプロジェクト全体に対して実行できるため、コンテンツが豊富なページをサーバー側のレンダリング用に選択できる [8]。また、サイトのアセットをまだダウンロードしていないWebブラウザーの負担を軽減するために、初めての訪問者に対してのみ実行できる[9]。「ホットリロード」機能は、変更が加えられたときにそれを検出し、適切なページを再レンダリングするため、サーバーを再起動する必要はない。これにより、アプリケーションコードに加えられた変更をすぐにウェブブラウザに反映できるが、一部のブラウザではページを更新する必要がある[8]。このソフトウェアは、開発者の便宜のためにページベースのルーティングを使用し、動的ルーティングのサポートが含まれています。その他の機能には、モジュールをライブで交換できるホットモジュールの交換、ページの読み込みに必要なコードのみを含む自動コード分割、読み込み時間を短縮するためのページのプリフェッチなどがある[8]。

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

脚注

  1. ^ “How Next.js aims to simplify front-end development” (英語). TechRepublic (2020年4月21日). 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. ^ ZEIT is now Vercel, (21 April 2020), https://vercel.com/blog/zeit-is-now-vercel 
  6. ^ “Develop. Preview. Ship. For the best frontend teams – Vercel”. vercel.com. 2021年10月6日時点のオリジナルよりアーカイブ。2020年9月22日閲覧。
  7. ^ “Differences Between Static Generated Sites And Server-Side Rendered Apps” (英語). Smashing Magazine (2020年7月2日). 2020年10月19日閲覧。
  8. ^ 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日閲覧。 
  9. ^ 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日閲覧。 
  10. ^ December 2 (2019年12月2日). “Why front-end development may be the new frontier” (英語). TechRepublic. 2020年10月20日閲覧。
  11. ^ a b “Comparing Styling Methods In Next.js” (英語). Smashing Magazine (2020年9月17日). 2020年10月20日閲覧。
  12. ^ a b January 31 (2020年2月). “An insider's look at Google's web framework contributions to Next.js and more” (英語). TechRepublic. 2020年10月19日閲覧。
  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 (2020年7月27日). “Next.js adds incremental static pages regeneration”. InfoWorld. 2020年10月2日時点のオリジナルよりアーカイブ。2020年9月22日閲覧。
  20. ^ “Next.js 11”. 2021年7月10日閲覧。
  21. ^ “Next.js 12” (英語). nextjs.org. 2021年10月27日閲覧。
  22. ^ Krill (2019年2月14日). “Next.js 8 now supports serverless apps”. InfoWorld. 2020年10月2日時点のオリジナルよりアーカイブ。2020年9月22日閲覧。
  23. ^ “Incremental Static Regeneration with Next.js” (英語). Vercel. 2022年3月6日閲覧。
  24. ^ Krill, Paul (2019年2月14日). “Next.js 8 now supports serverless apps” (英語). InfoWorld. 2022年6月30日閲覧。
  25. ^ “Incremental Static Regeneration” (英語). Vercel Documentation. 2022年6月30日閲覧。

関連項目

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

外部リンク

「https://ja.wikipedia.org/w/index.php?title=Next.js&oldid=90320321」から取得