イントロダクション
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 の主な機能のいくつかは次のとおりです：
| 機能 | 説明 |
|---|---|
| ルーティング | layout、入れ子になったルーティング、ロード状態、エラーハンドリングなどをサポートする Server Components 上に構築されたファイルシステムベースのルーターです。 |
| レンダリング | クライアントサイドとサーバーサイドのレンダリングを Client と Server Components で行います。静的および動的レンダリングによってサーバー上でさらに最適化されています。Edge と Node.js ランタイムでストリーミングされます。 |
| データ取得 | Server Components で async/await によるデータ取得の簡素化、リクエストメモ化、データキャッシュ、再検証のための拡張された fetch API を提供します。 |
| スタイリング | CSS Modules、Tailwind CSS、CSS-in-JS など、好みのスタイリング方法をサポートします |
| 最適化 | 画像、フォント、スクリプトの最適化を通じて、アプリケーションのコア Web バイタルとユーザーエクスペリエンスを向上させます。 |
| 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 をさらに詳しく学びますbuild a dashboard application。
アクセシビリティ
ドキュメントを読みながらスクリーンリーダーを使用する場合、最適なアクセシビリティを得るために Firefox と NVDA、または Safari と VoiceOver を使用することをお勧めします。
コミュニティに参加しよう
Next.js に関連する質問があれば、GitHub Discussions、Discord、X (Twitter)、Reddit で、私たちのコミュニティにいつでも聞いてください。