イントロダクション
Next.js ドキュメントへようこそ！
本サイトは Next.js 公式ドキュメントの日本語翻訳サイトです。 Next.js の公式 X アカウントにもポスト頂きました。
現在、本サイトでは Canary Version のアップデートに追従し、その内容を翻訳しています。
Next.jsとは？
Next.jsは、フルスタックWebアプリケーションを構築するためのReactフレームワークです。ユーザーインターフェースを構築するためにReactコンポーネントを使用し、Next.jsを追加機能や最適化のために利用します。
Next.jsは、内部でバンドリングやコンパイルなど、Reactに必要なツールを抽象化し、自動的に設定します。これにより、設定に時間を費やすことなく、アプリケーションの構築に集中できます。
個人の開発者であれ、大規模なチームの一員であれ、Next.jsはインタラクティブで動的、かつ高速なReactアプリケーションの構築をサポートします。
主な機能
Next.jsの主な機能には以下のものがあります：
| 機能 | 説明 |
|---|---|
| ルーティング | Server Componentsの上に構築されたファイルシステムベースのルーターで、レイアウト、ネストされたルーティング、ローディング状態、エラーハンドリングなどをサポートします。 |
| レンダリング | Client ComponentsとServer Componentsを使用したクライアントサイドおよびサーバーサイドレンダリング。Next.jsでサーバー上での静的および動的レンダリングでさらに最適化されています。EdgeとNode.jsランタイムでのストリーミング。 |
| データフェッチング | Server Componentsでのasync/awaitを使用した簡素化されたデータフェッチング、およびリクエストメモ化、データキャッシュ、再検証のための拡張されたfetch API。 |
| スタイリング | CSS Modules、Tailwind CSS、CSS-in-JSを含む、お好みのスタイリング方法をサポート |
| 最適化 | アプリケーションのCore Web Vitalsとユーザーエクスペリエンスを向上させるための画像、フォント、スクリプトの最適化。 |
| TypeScript | 型チェックの改善とより効率的なコンパイルを備えたTypeScriptのサポートの向上、カスタムTypeScriptプラグインと型チェッカーも提供。 |
ドキュメントの使い方
画面の左側にはドキュメントのナビバーがあります。ドキュメントのページは基本から応用まで順番に整理されているので、アプリケーションを構築する際にステップバイステップで進めることができます。ただし、どの順番で読んでもよく、あなたのユースケースに適したページに飛ばすこともできます。
画面の右側には、ページ内のセクション間を簡単に移動できる目次があります。ページをすばやく見つける必要がある場合は、上部の検索バーや検索ショートカット（Ctrl+KまたはCmd+K）を使用できます。
始めるには、インストールガイドをチェックしてください。
App RouterとPages Router
現在、本サイトでは App Router に関するドキュメントのみ翻訳して公開しております。 そのため、以下に記載のドロップダウンメニューは本サイトにはございません。
Next.jsには、App RouterとPages Routerの2つの異なるルーターがあります。App Routerは、Server Componentsやストリーミングなど、Reactの最新機能を使用できる新しいルーターです。Pages Routerは、サーバーレンダリングされたReactアプリケーションを構築するための元々のNext.jsルーターで、古いNext.jsアプリケーションのために引き続きサポートされています。
サイドバーの上部には、App RouterとPages Routerの機能を切り替えることができるドロップダウンメニューがあります。各ディレクトリに固有の機能があるため、どのタブが選択されているかを把握することが重要です。
ページの上部にあるパンくずリストも、App Routerのドキュメントを見ているのか、Pages Routerのドキュメントを見ているのかを示します。
前提知識
私たちのドキュメントは初心者に優しいように設計されていますが、Next.jsの機能に集中できるように基礎を確立する必要があります。新しい概念を紹介する際には、関連するドキュメントへのリンクを提供するようにします。
ドキュメントを最大限に活用するには、HTML、CSS、およびReactの基本的な理解が推奨されます。Reactのスキルを磨く必要がある場合は、React Foundations Courseをチェックして、基本を学びましょう。その後、ダッシュボードアプリケーションを構築して、Next.jsについてさらに学びましょう。
アクセシビリティ
ドキュメントを読む際にスクリーンリーダーを使用する場合、最適なアクセシビリティのためにFirefoxとNVDA、またはSafariとVoiceOverを使用することをお勧めします。
コミュニティに参加する
Next.jsに関連する質問がある場合は、GitHub Discussions、Discord、X (Twitter)、およびRedditでコミュニティにいつでも質問できます。