イントロダクション
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を使用した静的および動的レンダリングでさらに最適化 エッジおよびNode.jsランタイムでのストリーミング |
| データフェッチ | サーバーコンポーネントでのasync/awaitを使用したシンプルなデータフェッチ、リクエストメモ化、データキャッシュおよび再検証のための拡張されたfetchAPI |
| スタイリング | CSS Modules、Tailwind CSS、CSS-in-JSなど、お好みのスタイリングメソッドのサポート |
| 最適化 | アプリケーションのコアウェブバイタルとユーザーエクスペリエンスを向上させるための画像、フォント、スクリプトの最適化 |
| 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は、Next.jsのオリジナルのルーターで、サーバーレンダリングされたReactアプリケーションを構築する機能を提供し、古いNext.jsアプリケーションを引き続きサポートしています。
サイドバーの上部には、App RouterおよびPages Routerの機能を切り替えるドロップダウンメニューがあります。それぞれのディレクトリに特有の機能があるため、どちらのタブが選択されているかを把握することが重要です。
ページの上部にあるパンくずリストも、App Router ドキュメントまたはPages Router ドキュメントを閲覧しているかどうかを示します。
前提知識
ドキュメントは初心者に優しいように設計されていますが、Next.jsの機能に集中するために基本的な知識が必要です。新しい概念を導入する際には、関連するドキュメントへのリンクを提供しま す。
ドキュメントを最大限に活用するには、HTML、CSS、およびReactの基本的な理解が推奨されます。Reactスキルを向上させる必要がある場合は、基本を紹介するReact基礎コースをご覧ください。それから、ダッシュボードアプリケーションの構築を通じてNext.jsについてさらに学びましょう。
アクセシビリティ
ドキュメントを読む際にスクリーンリーダーを使用する場合、最適なアクセシビリティを確保するために、FirefoxとNVDA、またはSafariとVoiceOverを使用することをお勧めします。
コミュニティに参加する
Next.jsに関連する疑問がある場合は、GitHub Discussions、Discord、X (Twitter)、Redditでコミュニティにいつでも質問してください。