利用者:嶋田印刷/Next.js

{{Infobox Software
| 名称 = Next.js
| ロゴ = nextjs-logo.svg
| ロゴ代替 = The Next.js logo, a stylization of its name
| ロゴキャプション = Next.js logo
| 開発者 = Guillermo Rauch<ref name=simplify>{{Cite web|last1=April 21|first1=Matt Asay in Developer on|last2=2020|last3=Pst|first3=9:51 Am|title=How Next.js aims to simplify front-end development|url=https://www.techrepublic.com/article/how-next-js-aims-to-simplify-front-end-development/|access-date=2020-10-20|website=[[TechRepublic]]|date=21 April 2020|language=en}}</ref>
| 開発元 = Vercel and open-source community<ref>{{Cite web|url=https://github.com/vercel/next.js|title=vercel/next.js|website=GitHub|access-date=2019-03-17|archive-date=2019-03-16|archive-url=https://web.archive.org/web/20190316035131/https://github.com/vercel/next.js|url-status=live}}</ref>
| 初版 = {{Start date and age|2016|10|25}}<ref name=originalRelease>{{Cite web|url=https://github.com/vercel/next.js/releases/tag/1.0.0|title=Next.js First Release|website=GitHub|date=2019-03-14|access-date=2019-03-17|archive-date=2020-10-10|archive-url=https://web.archive.org/web/20201010232115/https://github.com/vercel/next.js/releases/tag/1.0.0|url-status=live}}</ref>
| 最新版 = 12.1.0
| 最新版発表日 = {{Start date and age|2022|02|17|df=yes}}
| 最新評価版 = 12.1.1
| リポジトリ = {{URL|https://github.com/vercel/next.js}}
| プログラミング言語 = [[JavaScript]], [[TypeScript]] and [[Rust (programming language)|Rust]]
| 対応プラットフォーム = [[Web platform]]
| サイズ = 17.0 [[Megabyte|MB]]
| 種別 = [[Web application framework]]
| ライセンス = [[MIT License]]
| 公式サイト = {{URL|https://nextjs.org}}
}}

'''Next.js'''は、 [[Node.js]]上に構築されたオープンソースのWeb開発フレームワークであり、[[サーバサイドスクリプト|サーバー側のレンダリング]]や[[静的ウェブページ|静的Webサイト]]の生成などの[[React]]ベースのWebアプリケーション機能を有効にする。 Reactのドキュメントには、「Node.jsを使用してサーバーレンダリングされたWebサイトを構築する」際の解決策として、開発者にアドバイスする「推奨ツールチェーン」の中でNext.jsが記載されている<ref>{{Cite web |title=Create a New React App – React |url=https://reactjs.org/docs/create-a-new-react-app.html |website=reactjs.org |access-date=2022-06-30 |language=en |page=4}}</ref>。従来のReactアプリはクライアント側のブラウザーでのみコンテンツをレンダリングできるが、Next.jsはこの機能を拡張して、サーバー側でレンダリングされるアプリケーションを含まれる。

Next.jsの著作権と商標は、Vercel（以前はZEIT）が所有しており<ref>{{Citation|title=ZEIT is now Vercel|date=21 April 2020|url=https://vercel.com/blog/zeit-is-now-vercel}}</ref>、オープンソース開発も維持および主導している<ref>{{Cite web |url=https://vercel.com/home |title=Develop. Preview. Ship. For the best frontend teams – Vercel |website=vercel.com |access-date=2020-09-22 |archive-date=2021-10-06 |archive-url=https://web.archive.org/web/20211006015250/https://vercel.com/home}}</ref>。

Next.jsは、[[サーバサイドスクリプト|サーバー側のレンダリング]]や[[静的ウェブページ|静的Webサイト]]の生成など、いくつかの追加機能を有効にする[[React]]フレームワークである<ref name="compareStatic">{{Cite web |date=2020-07-02 |title=Differences Between Static Generated Sites And Server-Side Rendered Apps |url=https://www.smashingmagazine.com/2020/07/differences-static-generated-sites-server-side-rendered-apps/ |access-date=2020-10-19 |website=[[Smashing Magazine]] |language=en}}</ref>。 Reactは、JavaScriptを使用してクライアントのブラウザでレンダリングされるWebアプリケーションを構築するために従来から使用されている[[JavaScriptライブラリ]]である<ref name="thakkar1">{{Citation|title=Next.js|last=Thakkar|first=Mohit|date=2020|url=https://doi.org/10.1007/978-1-4842-5869-9_3|journal=Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications|publisher=[[Apress]]|editor-last=Thakkar|editor-first=Mohit|pages=93–137|place=Berkeley, CA|isbn=978-1-4842-5869-9|language=en|doi=10.1007/978-1-4842-5869-9_3|access-date=2020-10-20}}</ref>。 ただし、開発者は、JavaScriptにアクセスできない、またはJavaScriptを無効にしているユーザーに対応していない、潜在的なセキュリティの問題、ページの読み込み時間が大幅に延長されている、サイトの[[検索エンジン最適化]]全体に悪影響を与える可能性があるなど、この戦略に関するいくつかの問題を認識している<ref name="thakkar1" />。Next.jsなどのフレームワークは、クライアントに送信する前にWebサイトの一部またはすべてをサーバー側でレンダリングできるようにすることで、これらの問題を回避できる<ref name="thakkar1" /><ref name="thakkar2">{{Citation|title=Adding Server-Side Rendering to Your React Application|last=Thakkar|first=Mohit|date=2020|url=https://doi.org/10.1007/978-1-4842-5869-9_4|journal=Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications|publisher=[[Apress]]|editor-last=Thakkar|editor-first=Mohit|pages=139–152|place=Berkeley, CA|isbn=978-1-4842-5869-9|language=en|doi=10.1007/978-1-4842-5869-9_4|access-date=2020-10-20}}</ref>。Next.jsは、Reactで最も人気のあるフレームワークの1つである<ref>{{Cite web |author=December 2 |first=Matt Asay in Developer on |title=Why front-end development may be the new frontier |url=https://www.techrepublic.com/article/why-front-end-development-may-be-the-new-frontier/ |access-date=2020-10-20 |website=[[TechRepublic]] |date=2 December 2019 |language=en}}</ref>。これは、新しいアプリを起動するときに利用できるいくつかの推奨される「ツールチェーン」の1つであり、すべてが一般的なタスクを支援するための抽象化レイヤーを提供している<ref name="SmashingStyle">{{Cite web |date=2020-09-17 |title=Comparing Styling Methods In Next.js |url=https://www.smashingmagazine.com/2020/09/comparison-styling-methods-next-js/ |access-date=2020-10-20 |website=[[Smashing Magazine]] |language=en}}</ref>。 Next.jsには[[Node.js]]が必要であり、 [[Npm (パッケージ管理ツール)|NodePackageManager]]を使用して初期化できる。

GoogleはNext.jsプロジェクトに寄付し、2019年に43件のプルリクエストを提供した。これらのリクエストは、未使用のJavaScriptの削除、読み込み時間の短縮、改善された指標の追加に役に立った<ref name="insiders">{{Cite web |author=January 31 |first=Matt Asay in Developer on |title=An insider's look at Google's web framework contributions to Next.js and more |url=https://www.techrepublic.com/article/insiders-look-at-googles-web-framework-contributions-to-next-js-and-more/ |access-date=2020-10-19 |website=[[TechRepublic]] |date=February 2020 |language=en}}</ref>。2020年3月の時点で、フレームワークは[[Netflix]]、[[GitHub]]、[[Uber]]、[[チケットマスター|Ticketmaster]]、 [[スターバックス|Starbucks]]などの多くの大規模なWebサイトで使用されている<ref name="thakkar1">{{Citation|title=Next.js|last=Thakkar|first=Mohit|date=2020|url=https://doi.org/10.1007/978-1-4842-5869-9_3|journal=Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications|publisher=[[Apress]]|editor-last=Thakkar|editor-first=Mohit|pages=93–137|place=Berkeley, CA|isbn=978-1-4842-5869-9|language=en|doi=10.1007/978-1-4842-5869-9_3|access-date=2020-10-20}}</ref>。2020年の初めに、Vercelがソフトウェアの改善をサポートするためにシリーズAの資金で2,100万ドルを確保したことが発表された<ref>{{Cite web |date=2020-10-07 |title=Static site generation with single page app functionality? That's what's coming Next(.js) |url=https://stackoverflow.blog/2020/10/07/qa-with-the-creators-of-next-js-on-version-9-5/ |access-date=2020-10-20 |website=Stack Overflow Blog |language=en-US}}</ref>。 フレームワークの原作者であるGuillermoRauchは、現在VercelのCEOであり、プロジェクトの主任開発者はTimNeutkensである<ref>{{Cite web |author=Krill |first=Paul |date=2016-10-31 |title=Next step after Node.js: Framework for 'universal' JavaScript apps |url=https://www.infoworld.com/article/3136337/next-step-after-nodejs-framework-for-universal-javascript-apps.html |access-date=2020-10-20 |website=[[InfoWorld]] |language=en}}</ref>。

== 開発の歴史 ==
Next.jsは、 {{Start date and age|2016|10|25}}に[[GitHub]]でオープンソースプロジェクトとして最初にリリースされた<ref>{{Cite web |author=Krill |first=Paul |date=2017-03-28 |title=Next.js 2.0 plays better with React and JavaScript |url=https://www.infoworld.com/article/3185385/nextjs-20-plays-better-with-react-and-javascript.html |access-date=2020-10-20 |website=[[InfoWorld]] |language=en}}</ref>。もともとは6つの原則に基づいて開発された、セットアップを必要としないすぐに使える機能、どこでもJavaScript、すべての機能はJavaScriptで記述され、自動コード分割とサーバーレンダリング、構成可能なデータフェッチ、リクエストの予測、簡素化展開している<ref>{{Cite web |author=Krill |first=Paul |date=2018-09-21 |title=Next.js 7 framework compiles faster, supports WebAssembly |url=https://www.infoworld.com/article/3307190/nextjs-7-framework-compiles-faster-supports-webassembly.html |access-date=2020-10-20 |website=[[InfoWorld]] |language=en}}</ref>。Next.js 2.0は、2017年3月に発表された。これには、小さなWebサイトでの作業を容易にするいくつかの改善が含まれている。また、ビルド効率が向上し、ホットモジュール交換機能のスケーラビリティが向上した<ref>{{Cite web |author=Krill |first=Paul |date=2019-02-14 |title=Next.js 8 now supports serverless apps |url=https://www.infoworld.com/article/3340817/nextjs-8-now-supports-serverless-apps.html |access-date=2020-10-20 |website=[[InfoWorld]] |language=en}}</ref>。バージョン7.0は2018年9月にリリースされ、エラー処理が改善され、動的ルート処理が改善されたReactのコンテキストAPIがサポートされた。これは、 [[Webpack|webpack4]]にアップグレードした最初のバージョンでもある<ref>{{Cite web |author=Krill |first=Paul |date=2020-03-12 |title=Next.js upgrade emphasizes static site generation |url=https://www.infoworld.com/article/3532316/nextjs-upgrade-emphasizes-static-site-generation.html |access-date=2020-10-20 |website=[[InfoWorld]] |language=en}}</ref>。バージョン8.0は2019年2月にリリースされ、アプリケーションのサーバーレスデプロイメントを提供する最初のバージョンであり、コードはオンデマンドで実行される[[無名関数|ラムダ関数]]に分割されいる。このバージョンでは、静的エクスポートに必要な時間とリソースも削減され、プリフェッチのパフォーマンスが向上した<ref>{{Cite web |url=https://www.infoworld.com/article/3568468/nextjs-adds-incremental-static-pages-regeneration.html |title=Next.js adds incremental static pages regeneration |first=Paul |author=Krill |date=July 27, 2020 |website=[[InfoWorld]] |access-date=September 22, 2020 |archive-date=October 2, 2020 |archive-url=https://web.archive.org/web/20201002003602/https://www.infoworld.com/article/3568468/nextjs-adds-incremental-static-pages-regeneration.html}}</ref>。 2020年3月に発表されたバージョン9.3には、さまざまな最適化とグローバルな[[Sass]]およびCSSモジュールのサポートが含まれていた<ref>{{Cite web |title=Next.js 11 |url=https://nextjs.org/blog/next-11 |access-date=2021-07-10}}</ref>。2020年7月27日に、Next.jsバージョン9.5が発表され、増分静的再生成、書き換え、リダイレクトサポートなどの新機能が追加された<ref>{{Cite web |title=Next.js 12 |url=https://nextjs.org/blog/next-12 |access-date=2021-10-27 |website=nextjs.org |language=en}}</ref> 。2021年6月15日、Next.jsバージョン11がリリースされ、 [[Webpack]]5のサポート、リアルタイムのコラボレーティブコーディング機能「Next.jsLive」のプレビュー、CreateReactAppからNext.jsへの自動変換の実験機能が導入された、互換性のあるフォームが「CreateReactAppMigration」 である<ref>{{Cite web |url=https://www.infoworld.com/article/3340817/nextjs-8-now-supports-serverless-apps.html |title=Next.js 8 now supports serverless apps |first=Paul |author=Krill |date=February 14, 2019 |website=[[InfoWorld]] |access-date=September 22, 2020 |archive-date=October 2, 2020 |archive-url=https://web.archive.org/web/20201002001850/https://www.infoworld.com/article/3340817/nextjs-8-now-supports-serverless-apps.html}}</ref>。2021年10月26日に、Next.js 12がリリースされ、Rustコンパイラが追加され、コンパイルが高速化され、 AVIFサポート、Edge Functions＆Middleware、およびNative ESM＆URLImportsが追加された<ref>{{Cite web |url=https://vercel.com/docs/concepts/next.js/incremental-static-regeneration |title=Incremental Static Regeneration with Next.js |website=Vercel |access-date=2022-03-06 |language=en}}</ref>。

== スタイリングと機能 ==
Next.jsは、 [[Cascading Style Sheets|CSS]]だけでなく、プリコンパイルされた[[Sass|Scss]]と[[Sass]] 、 CSS-in-JS 、およびスタイル化されたJSXを使用したスタイリングをサポートしている<ref name="SmashingStyle">{{Cite web |date=2020-09-17 |title=Comparing Styling Methods In Next.js |url=https://www.smashingmagazine.com/2020/09/comparison-styling-methods-next-js/ |access-date=2020-10-20 |website=[[Smashing Magazine]] |language=en}}</ref>。更に、 [[TypeScript]]サポートとスマートバンドルで構築されている<ref>{{Cite web |title=Next.js 8 now supports serverless apps |url=https://www.infoworld.com/article/3340817/nextjs-8-now-supports-serverless-apps.html |website=InfoWorld |date=2019-02-14 |access-date=2022-06-30 |language=en |first=Paul |last=Krill}}</ref>。オープンソースの[[トランスコンパイラ|トランスパイラー]][[Babel (トランスコンパイラ)|Babel]]は、コードをブラウザーで使用できるJavaScriptに変換およびコンパイルするために使用されいる。後でモジュールをバンドルするために、別のオープンソースツールである[[Webpack]]が使用される。これらのツールはすべて、ターミナルの[[Npm (パッケージ管理ツール)|npm]]で使用する<ref name="insiders">{{Cite web |author=January 31 |first=Matt Asay in Developer on |title=An insider's look at Google's web framework contributions to Next.js and more |url=https://www.techrepublic.com/article/insiders-look-at-googles-web-framework-contributions-to-next-js-and-more/ |access-date=2020-10-19 |website=[[TechRepublic]] |date=February 2020 |language=en}}</ref>。 

Next.jsの主な機能は、サーバー側のレンダリングを使用してWebブラウザーの負担を軽減し、セキュリティを強化することである{{要出典|date=August 2021}} 。これは、アプリケーションの任意の部分またはプロジェクト全体に対して実行できるため、コンテンツが豊富なページをサーバー側のレンダリング用に選択できる <ref name="thakkar1">{{Citation|title=Next.js|last=Thakkar|first=Mohit|date=2020|url=https://doi.org/10.1007/978-1-4842-5869-9_3|journal=Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications|publisher=[[Apress]]|editor-last=Thakkar|editor-first=Mohit|pages=93–137|place=Berkeley, CA|isbn=978-1-4842-5869-9|language=en|doi=10.1007/978-1-4842-5869-9_3|access-date=2020-10-20}}</ref>。また、サイトのアセットをまだダウンロードしていないWebブラウザーの負担を軽減するために、初めての訪問者に対してのみ実行できる<ref name="thakkar2">{{Citation|title=Adding Server-Side Rendering to Your React Application|last=Thakkar|first=Mohit|date=2020|url=https://doi.org/10.1007/978-1-4842-5869-9_4|journal=Building React Apps with Server-Side Rendering: Use React, Redux, and Next to Build Full Server-Side Rendering Applications|publisher=[[Apress]]|editor-last=Thakkar|editor-first=Mohit|pages=139–152|place=Berkeley, CA|isbn=978-1-4842-5869-9|language=en|doi=10.1007/978-1-4842-5869-9_4|access-date=2020-10-20}}</ref>。「ホットリロード」機能は、変更が加えられたときにそれを検出し、適切なページを再レンダリングするため、サーバーを再起動する必要はない。これにより、アプリケーションコードに加えられた変更をすぐにウェブブラウザに反映できるが、一部のブラウザではページを更新する必要がある<ref name="thakkar1" />。このソフトウェアは、開発者の便宜のためにページベースのルーティングを使用し、動的ルーティングのサポートが含まれています。その他の機能には、モジュールをライブで交換できるホットモジュールの交換、ページの読み込みに必要なコードのみを含む自動コード分割、読み込み時間を短縮するためのページのプリフェッチなどがある<ref name="thakkar1" />。 

Next.jsは、インクリメンタル静的再生（ISR）<ref>{{Cite web |title=Incremental Static Regeneration |url=https://vercel.com/docs/concepts/next.js/incremental-static-regeneration |website=Vercel Documentation |access-date=2022-06-30 |language=en}}</ref> および静的サイト生成（SSG）もサポートする - Webサイトのコンパイル済みバージョンは、通常、ビルド時にビルドされ、.nextフォルダーとして保存される。ユーザーがリクエストを行うと、静的HTMLページであるビルド済みバージョンがキャッシュされて送信される。これにより、読み込み時間が非常に速くなるが、頻繁に変更され、多くのユーザー入力を利用するインタラクティブなサイトには適さないため、すべてのWebサイトに適しているわけではない。

== 参照 ==
{{ウィキポータルリンク|Free and open-source software}}

* [[Angular|Angular（Webフレームワーク）]]
* Gatsby（JavaScriptフレームワーク）
* [[LAMP (ソフトウェアバンドル)|ランプ]]
* [[React|React（JavaScriptライブラリ）]]
* [[Nuxt.js]]
* [[Vue.js]]
* [[Webアプリケーションフレームワーク|JavaScriptフレームワーク]]

== 出典 ==
{{Reflist}}
<references group=""></references>

== 外部リンク ==

* {{Cite web |title=Case Study - Hulu {{!}} Next.js |url=https://nextjs.org/case-studies/hulu |access-date=2020-10-16 |website=nextjs.org |language=en}}
* {{Cite web |author=Smith |first=Craig S. |title=Have You Noticed The New Web? It's Faster, More Secure |url=https://www.forbes.com/sites/craigsmith/2020/04/21/have-you-noticed-the-new-web-its-faster-more-secure/ |access-date=2020-10-16 |website=Forbes |language=en}}
* {{Cite web |author=April 3 |first=Matt Asay in Developer on |title=Front-end frameworks are about to get even cooler, says Google lead |url=https://www.techrepublic.com/article/front-end-frameworks-are-about-to-get-even-cooler-says-google-lead/ |access-date=2020-10-16 |website=[[TechRepublic]] |date=3 April 2020 |language=en}}
* {{Cite web |author=Asay |first=Matt |date=2020-06-01 |title=How GraphQL turned web development on its head |url=https://www.infoworld.com/article/3545951/how-graphql-turned-web-development-on-its-head.html |access-date=2020-10-20 |website=[[InfoWorld]] |language=en}}
<nowiki>
[[Category:静的サイトジェネレーター]]
[[Category:ウェブアプリケーションフレームワーク]]
[[Category:MIT License]]
[[Category:JavaScriptフレームワーク]]
[[Category:ウェブフレームワーク]]</nowiki>