はじめに
Next.jsドキュメンテーションへようこそ！
Next.jsとは
Next.jsは、フルスタックのウェブアプリケーションを構築するためのReactフレームワークです。Reactコンポーネントを使用してユーザーインターフェースを構築し、Next.jsで追加の機能と最適化を行います。
内部的に、Next.jsはバンドリング、コンパイルなど、Reactに必要なツーリングを抽象化し、自動的に設定します。これにより、設定に時間を費やすのではなく、アプリケーションの構築に集中できます。
個人の開発者でも大規模なチームの一員でも、Next.jsは対話的で動的かつ高速なReactアプリケーションの構築を支援します。
主な機能
Next.jsの主な機能には以下のようなものがあります：
| 機能 | 説明 |
|---|---|
| ルーティング | サーバーコンポーネント上に構築されたファイルシステムベースのルーター。レイアウト、ネストされたルーティング、ローディング状態、エラーハンドリングなどをサポートします。 |
| レンダリング | クライアントコンポーネントとサーバーコンポーネントによるクライアントサイドとサーバーサイドのレンダリング。Next.jsによるサーバー上の静的および動的レンダリングでさらに最適化。Edge and Node.jsランタイムでのストリーミング。 |
| データ取得 | サーバーコンポーネントでのasync/awaitを使用したデータ取得の簡素化、リクエストのメモ化、データキャッシュ、再検証のための拡張fetch API。 |
| スタイリング | CSS Modules、Tailwind CSS、CSS-in-JSなど、好みのスタイリング方法をサポート。 |
| 最適化 | アプリケーションのCore Web VitalsとユーザーエクスペリエンスW向上のための、画像、フォント、スクリプトの最適化。 |
| TypeScript | より優れた型チェックと効率的なコンパイル、カスタムTypeScriptプラグインと型チェッカーを含む、TypeScriptのサポート改善。 |
ドキュメントの使い方
画面の左側に、ドキュメントのナビゲーションバーがあります。ドキュメントのページは基本から高度な内容まで順番に構成されているので、アプリケーション構築時にステップバイステップで追うことができます。ただし、任意の順序で読んだり、ユースケースに適したページにスキップすることもできます。
画面の右側には、ページ内のセクション間を簡単に移動できる目次があります。ページをすばやく見つけたい場合は、上部の検索バーか、検索ショートカット（Ctrl+KまたはCmd+K）を使用できます。
まずは、インストールガイドをチェックしてみてください。
App RouterとPages Router
Next.jsには、App RouterとPages Routerの2種類のルーターがあります。App Routerは、サーバーコンポーネントやストリーミングなど、Reactの最新機能を使用できる新しいルーターです。Pages Routerは、サーバーサイドレンダリングされたReactアプリケーションを構築できる従来のNext.jsルーターで、古い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のコミュニティで歓迎されます。