Loading article…
 Next.js ロゴ | |
| 原作者 | ギジェルモ・ラウフ[1] |
|---|---|
| 開発者 | Vercelとオープンソースコミュニティ[2] |
| 初回リリース | 2016年10月25日[3] |
| 安定リリース | 15.0.3 [4]
/ 2024年11月7日 |
| プレビューリリース | v15.0.4-カナリア.22 [5]
|
| リポジトリ |
|
| 書かれた | JavaScript、TypeScript、Rust |
| プラットフォーム | ウェブプラットフォーム |
| サイズ | 17.0MB |
| タイプ | Web アプリケーション フレームワーク |
| ライセンス | MITライセンス |
| Webサイト | 次ページ |
Next.jsは、サーバー側レンダリングと静的レンダリングを備えたReactベースの Web アプリケーションを提供する民間企業Vercelによって作成されたオープンソースの Web 開発フレームワークです。
Reactのドキュメントでは、Next.jsが「推奨ツールチェーン」の中に挙げられており、「Node.jsでサーバー側でレンダリングされるウェブサイトを構築する」開発者に推奨されています。[6]従来のReactアプリではクライアント側のブラウザでしかコンテンツをレンダリングできませんでしたが、Next.jsではこの機能を拡張して、サーバー側でレンダリングされるアプリケーションも含めることができます。
Next.jsの著作権と商標はVercelが所有しており[7] 、同社はオープンソース開発の維持と主導も行っています。[8]
背景
Next.js は、サーバー側レンダリングや静的レンダリングなど、いくつかの追加機能を有効にするReactフレームワークです。[9] React は、従来、JavaScript を使用してクライアントのブラウザーでレンダリングされる Web アプリケーションを構築するために使用されているJavaScript ライブラリです。 [10]ただし、開発者はこの戦略について、JavaScript にアクセスできない、または無効にしているユーザーには対応していない、潜在的なセキュリティ問題、ページの読み込み時間が大幅に長くなる、サイト全体の検索エンジン最適化に悪影響を与えるなど、いくつかの問題があることを認識しています。[10] Next.js などのフレームワークは、Web サイトの一部またはすべてをサーバー側でレンダリングしてからクライアントに送信できるようにすることで、これらの問題を回避します。[10] [11] Next.js は、React で最も人気のあるフレームワークの 1 つです。[12]これは、新しいアプリを起動するときに使用できるいくつかの推奨「ツールチェーン」の 1 つであり、それらはすべて、一般的なタスクを支援する抽象化レイヤーを提供します。[13] Next.js にはNode.js が必要であり、 npm を使用して初期化できます。
GoogleはNext.jsプロジェクトに貢献しており、2019年には43件のプルリクエストを行った。[14] 2024年10月現在、このフレームワークはWalmart、Apple、Nike、Netflix、TikTok、Uber、Lyft、Starbucks、Spotifyなど多くの大規模ウェブサイトで使用されている。[10] [15] 2020年初頭、Vercelはソフトウェアの改善を支援するためにシリーズAの資金調達で2,100万ドルを調達した。[1]このフレームワークの原作者であるGuillermo Rauchは現在VercelのCEOを務めており、プロジェクトの主任メンテナーはTim Neutkensである。[16]
開発の歴史
Next.jsは、2016年10月25日にGitHubでオープンソースプロジェクトとして初めてリリースされました。[3]当初は、セットアップが不要なすぐに使える機能、どこでもJavaScript、すべての関数がJavaScriptで記述されていること、自動コード分割とサーバーレンダリング、設定可能なデータ取得、リクエストの予測、デプロイメントの簡素化という6つの原則に基づいて開発されました。[17]
Next.js 2.0は2017年3月に発表され、小規模なウェブサイトでの作業を容易にするいくつかの改善点が含まれています。また、ビルド効率が向上し、ホットモジュール置換機能のスケーラビリティも向上しました。[18]
バージョン7.0は2018年9月にリリースされ、エラー処理が改善され、ReactのコンテキストAPIのサポートにより動的ルート処理が改善されました。これはWebpack 4にアップグレードした最初のバージョンでもありました。[19]
バージョン8.0は2019年2月にリリースされ、コードをオンデマンドで実行されるラムダ関数に分割する、アプリケーションのサーバーレスデプロイメントを提供する最初のバージョンでした。このバージョンでは、静的エクスポートに必要な時間とリソースも削減され、プリフェッチのパフォーマンスも向上しました。[20]
2020年3月に発表されたバージョン9.3には、さまざまな最適化とグローバルなSassおよびCSSモジュールのサポートが含まれていました。[21]
2020年7月27日にNext.jsバージョン9.5が発表され、増分静的再生成、書き換え、リダイレクトサポートなどの新機能が追加されました。[22]
2021年6月15日にNext.jsバージョン11がリリースされ、Webpack 5のサポート、リアルタイム共同コーディング機能「Next.js Live」のプレビュー、Create React AppからNext.js互換フォームへの自動変換の実験的機能「Create React App Migration」などが導入されました。[23]
2021年10月26日にNext.js 12がリリースされ、Rustコンパイラが追加され、コンパイルが高速化され、AVIFサポート、Edge Functionsとミドルウェア、ネイティブESMとURLインポートが追加されました。[24]
2022年10月26日、VercelはNext.js 13をリリースしました。このメジャーリリースでは、レイアウト、React Server Components、ストリーミング、新しいデータ取得方法のセットのサポートを含むApp Routerが追加され、ベータ版で新しいルーティングパターンが導入されました。さらに、Vercelは、Webpackの後継であるTurbopack、増分ビルドシステム用のTurborepoを含む、Turboと呼ばれるフロントエンド開発用の新しいツールチェーンを発表しました。[25]
2023年5月、VercelはNext.js 13.4をリリースしました。これによりApp Routerの安定バージョンが導入され、開発者は本番環境で使用できるようになりました。[26]
2023年10月、Vercelはエッジランタイムを使用したメモリ管理が改善されたNext.js 14をリリースしました。[27]
スタイルと機能
Next.jsは、 CSSによるスタイリングのほか、プリコンパイルされたScssとSass、CSS-in-JS、スタイル付きJSXをサポートしています。[13]さらに、TypeScriptサポートとスマートバンドリングが組み込まれています。[28]オープンソースのトランスパイラSWCは、コードをブラウザで使用できるJavaScriptに変換してコンパイルするために使用されます。[29]別のオープンソースツールである Webpackは、後でモジュールをバンドルするために使用されますが、現在はTurboPackに置き換えられています。[30]これらのツールはすべて、ターミナルでnpmと一緒に使用されます。 [14]
Next.js の主な特徴は、サーバー側レンダリングを使用して Web ブラウザーの負荷を軽減し、セキュリティを強化することです[要出典]。これは、アプリケーションの任意の部分またはシステム全体で実行でき、コンテンツが豊富なページをサーバー側レンダリング用に選択できます。[10]また、サイトのアセットをまだダウンロードしていない Web ブラウザーの負荷を軽減するために、初めて訪問したユーザーに対してのみ実行することもできます。[11]「ホット リロード」機能は、変更が行われたときにそれを検出し、適切なページを再レンダリングするため、サーバーを再起動する必要がありません。これにより、アプリケーション コードに加えられた変更は Web ブラウザーにすぐに反映されますが、一部のブラウザーではページを更新する必要があります。[10] このソフトウェアは、開発者の利便性のためにページベースのルーティングを使用し、動的ルーティングをサポートしています。その他の機能には、モジュールをライブで置き換えることができるホット モジュール置換、ページの読み込みに必要なコードのみを含む自動コード分割、読み込み時間を短縮するページ プリフェッチなどがあります。[10]
Next.jsは、増分静的再生成[31]と静的サイト生成もサポートしています。ウェブサイトのコンパイルされたバージョンは通常、ビルド時に構築され、.nextフォルダとして保存されます。ユーザーがリクエストを行うと、静的HTMLページである事前構築バージョンがキャッシュされ、ユーザーに送信されます。これにより、読み込み時間が非常に速くなりますが、すべてのウェブサイト、特に頻繁に変更され、多くのユーザー入力を利用するインタラクティブなサイトに適しているわけではありません。
参照
.svg/500px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}
参考文献
- ^ ab Asay, Matt (2020年4月21日). 「Next.js がフロントエンド開発の簡素化を目指す方法」. TechRepublic . 2020年6月3日時点のオリジナルよりアーカイブ。2020年10月20日閲覧。
- ^ "vercel/next.js". GitHub . 2019-03-16 にオリジナルからアーカイブ。2019-03-17に取得。
- ^ ab "Next.js First Release". GitHub . 2019-03-14. 2020-10-10時点のオリジナルよりアーカイブ。2019-03-17取得。
- ^ 「リリース 15.0.3」。2024年11月7日。 2024年11月21日閲覧。
- ^ 「リリース · vercel/next.js」。GitHub。Vercel。2024年11月21日閲覧。
- ^ 「推奨ツールチェーン」（HTML） . React ドキュメント. 2021 年7 月 10 日閲覧。
- ^ 「Next.js ブランドガイドライン」。2022年8月26日。
- ^ 「開発。プレビュー。出荷。最高のフロントエンドチーム向け – Vercel」(HTML) vercel.com。2021年10月6日時点のオリジナルよりアーカイブ。2020年9月22日閲覧。
- ^ 「静的に生成されたサイトとサーバー側でレンダリングされるアプリの違い」。Smashing Magazine。2020年7月2日。 2020年10月19日閲覧。
- ^ abcdefg Thakkar, Mohit (2020). Thakkar, Mohit (ed.). 「Next.js」.サーバーサイドレンダリングを使用したReactアプリの構築：React、Redux、Nextを使用して完全なサーバーサイドレンダリングアプリケーションを構築する。カリフォルニア州バークレー：Apress。pp.93–137。doi ：10.1007 /978-1-4842-5869-9_3。ISBN 978-1-4842-5869-9. S2CID 241224880 . 2020年10月20日閲覧。
- ^ ab Thakkar, Mohit (2020). Thakkar, Mohit (ed.). 「React アプリケーションへのサーバーサイドレンダリングの追加」。サーバーサイドレンダリングを使用した React アプリの構築: React、Redux、Next を使用して完全なサーバーサイドレンダリングアプリケーションを構築する。カリフォルニア州バークレー: Apress。pp . 139–152。doi :10.1007/978-1-4842-5869-9_4。ISBN 978-1-4842-5869-9. S2CID 216333955 . 2020年10月20日閲覧。
- ^ Asay, Matt (2019 年 12 月 2 日). 「フロントエンド開発が新たなフロンティアとなる理由」. TechRepublic . 2020 年 10 月 20 日閲覧。
- ^ ab Lukman、Adebiyi Adedotun (2020-09-17)。「Next.js のスタイリング方法の比較」。Smashing Magazine。2020年 10 月 20 日閲覧。
- ^ ab Asay, Matt (2020 年 2 月 1 日). 「An insider's look at Google's web framework contributing to Next.js and more」. TechRepublic . 2020 年 10 月 19 日閲覧。
- ^ 「Spotify.com テクノロジースタック」。Wappalyzer 。2024年10月15日閲覧。
- ^ Donovan, Ryan (2020-10-07). 「シングルページ アプリ機能を備えた静的サイト生成? それが次に来るもの(.js)」(html)。Stack Overflow ブログ。2020-10-20に取得。
- ^ Krill, Paul (2016-10-31). 「Node.js の次のステップ: 'ユニバーサル' JavaScript アプリ向けフレームワーク」InfoWorld . 2020-10-20閲覧。
- ^ Krill, Paul (2017-03-28). 「Next.js 2.0 は React および JavaScript との組み合わせでより優れたパフォーマンスを発揮します」。InfoWorld。2020年 10 月 20 日閲覧。
- ^ Krill, Paul (2018-09-21). 「Next.js 7 フレームワークはコンパイル速度が速く、WebAssembly をサポート」InfoWorld . 2020 年 10 月 20日閲覧。
- ^ Krill, Paul (2019-02-14). 「Next.js 8 がサーバーレス アプリをサポートするようになりました」. InfoWorld . 2020-10-20閲覧。
- ^ Krill, Paul (2020-03-12). 「Next.js のアップグレードでは静的サイト生成が強調される」InfoWorld . 2020-10-20閲覧。
- ^ Krill, Paul (2020年7月27日). 「Next.js が増分静的ページ再生成を追加」. InfoWorld . 2020年10月2日時点のオリジナルよりアーカイブ。2020年9月22日閲覧。
- ^ 「Next.js 11」。2021年7月10日閲覧。
- ^ “Next.js 12”. nextjs.org . 2021年10月27日閲覧。
- ^ オルバン、バラーズ (2022-10-25). 「Next.js 13」。nextjs.org 。2023-06-09に取得。
- ^ Markbåge, Sebastian; Neutkens, Tim (2023-05-04). 「Next.js 13.4」. nextjs.org . 2023-06-07閲覧。
- ^ “Next.js 14.0.0”. nextjs.org . 2023-12-08 . 2023-11-26閲覧。
- ^ Krill, Paul (2019年2月14日). 「Next.js 8 がサーバーレス アプリをサポート」InfoWorld . 2020年10月2日時点のオリジナルよりアーカイブ。2020年9月22日閲覧。
- ^ 「アーキテクチャ: Next.js コンパイラ | Next.js」。nextjs.org . 2023 年 8 月 19 日閲覧。
- ^ 「アーキテクチャ: Turbopack | Next.js」。nextjs.org . 2023年8月19日閲覧。
- ^ 「Next.js による増分静的再生成」。Vercel。2022年 3 月 6 日閲覧。
外部リンク
- 「ケーススタディ - Hulu | Next.js」。nextjs.org 。 2020 年 10 月 16 日閲覧。
- スミス、クレイグ S.「新しいウェブに気づきましたか? より高速で、より安全です」。Forbes。2020年 10 月 16 日閲覧。
- Asay, Matt (2020 年 4 月 3 日)。「フロントエンド フレームワークは今後さらに進化する、と Google の責任者が語る」。TechRepublic。2020年 10 月 16 日閲覧。
- Asay, Matt (2020-06-01). 「GraphQL が Web 開発を根本から変える方法」InfoWorld . 2020-10-20閲覧。