はじめに
Next.js ドキュメントへようこそ！
Next.js とは？
Next.js はフルスタックウェブアプリケーションを構築するための React フレームワークです。ユーザーインターフェースの構築には React コンポーネントを、追加機能や最適化には Next.js を使用します。
Next.js は内部で、バンドリングやコンパイルなど React に必要なツールを抽象化し自動設定します。これにより、設定に時間を費やす代わりにアプリケーション開発に集中できます。
個人開発者でも大規模チームの一員でも、Next.js を使えばインタラクティブでダイナミック、かつ高速な React アプリケーションを構築できます。
主な機能
Next.js の主な機能には以下があります:
| 機能 | 説明 |
|---|---|
| ルーティング | サーバーコンポーネントを基盤としたファイルシステムベースのルーター。レイアウト、ネストされたルーティング、ローディング状態、エラーハンドリングなどをサポート。 |
| レンダリング | クライアントコンポーネントとサーバーコンポーネントによるクライアントサイドおよびサーバーサイドレンダリング (SSR)。Next.js による静的および動的レンダリングでさらに最適化。Edge と Node.js ランタイムでのストリーミング対応。 |
| データ取得 | サーバーコンポーネントでの 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
Next.js には2種類のルーターがあります: App Router と Pages Router です。App Router は新しいルーターで、サーバーコンポーネントやストリーミングなど React の最新機能を使用できます。Pages Router は元々の Next.js ルーターで、サーバーサイドレンダリング (SSR) された React アプリケーションを構築でき、従来の Next.js アプリケーションを引き続きサポートします。
サイドバー上部には、App Router と Pages Router の機能を切り替えるドロップダウンメニューがあります。各ディレクトリに固有の機能があるため、どのタブが選択されているかを把握することが重要です。
ページ上部のパンくずリストにも、App Router または Pages Router のどちらのドキュメントを表示しているかが示されます。
前提知識
当ドキュメントは初心者向けに設計されていますが、Next.js の機能に焦点を当てるため、一定の基礎知識を前提としています。新しい概念を紹介する際には、関連ドキュメントへのリンクを必ず提供します。
ドキュメントを最大限活用するには、HTML、CSS、React の基本的な理解が推奨されます。React スキルの復習が必要な場合は、基礎を紹介する React Foundations コース をチェックしてください。その後、ダッシュボードアプリケーション構築 で Next.js についてさらに学べます。
アクセシビリティ
スクリーンリーダーを使用してドキュメントを読む場合、アクセシビリティを最適化するために Firefox と NVDA、または Safari と VoiceOver の使用を推奨します。
コミュニティに参加
Next.js に関して質問がある場合は、いつでも GitHub Discussions、Discord、Twitter、Reddit のコミュニティでお尋ねください。