App Router
Next.js の App Router は、React の最新機能を活用してアプリケーションを構築するための新しいパラダイムです。既に Next.js に慣れている方にとって、App Router は Pages Router のファイルシステムベースのルーターを自然に進化させたものと言えます。
新しいアプリケーションでは App Router の使用を推奨します。既存のアプリケーションでは App Router を段階的に導入 できます。また、同じアプリケーション内で両方のルーターを使用することも可能です。
よくある質問
レイアウトでリクエストオブジェクトにアクセスする方法は？
意図的に生のリクエストオブジェクトにはアクセスできません。ただし、サーバー専用関数を通じて headers と cookies にはアクセス可能です。クッキーの設定 も行えます。
レイアウト は再レンダリングされません。ページ間を移動する際に不必要な計算を避けるため、キャッシュされて再利用されます。レイアウトが生のリクエストにアクセスできないように制限することで、Next.js はレイアウト内でパフォーマンスに悪影響を及ぼす可能性のある低速または高コストなユーザーコードの実行を防ぎます。
この設計により、異なるページ間でレイアウトの動作が一貫して予測可能になり、適用される特定のページに関係なくレイアウトが同じように動作することを開発者が信頼できるため、開発とデバッグが簡素化されます。
構築する UI パターンによっては、Parallel Routes（並列ルート） を使用して同じレイアウト内で複数のページをレンダリングでき、ページはルートセグメントと URL 検索パラメータにアクセスできます。
ページでURLにアクセスする方法は？
デフォルトでは、ページはサーバーコンポーネントです。特定のページに対して、params プロップを通じてルートセグメントに、searchParams プロップを通じて URL 検索パラメータにアクセスできます。
クライアントコンポーネントを使用している場合、より複雑なルートに対して usePathname、useSelectedLayoutSegment、useSelectedLayoutSegments が利用可能です。
さらに、構築する UI パターンによっては、Parallel Routes（並列ルート） を使用して同じレイアウト内で複数のページをレンダリングでき、ページはルートセグメントと URL 検索パラメータにアクセスできます。
サーバーコンポーネントからリダイレクトする方法は？
redirect を使用して、ページから相対または絶対 URL にリダイレクトできます。redirect は一時的（307）リダイレクトで、permanentRedirect は恒久的（308）リダイレクトです。これらの関数が UI ストリーミング中に使用されると、クライアントサイドでリダイレクトを発行するためのメタタグが挿入されます。
App Router で認証を処理する方法は？
App Router をサポートする一般的な認証ソリューション:
- NextAuth.js
- Clerk
- Auth0
- Stytch
- またはセッションや JWT を手動で処理
クッキーを設定する方法は？
Server Actions（サーバーアクション） または Route Handlers（ルートハンドラ） で cookies 関数を使用してクッキーを設定できます。
HTTP はストリーミング開始後にクッキーを設定することを許可していないため、ページやレイアウトから直接クッキーを設定することはできません。Middleware（ミドルウェア） からもクッキーを設定できます。
マルチテナントアプリを構築する方法は？
単一の Next.js アプリケーションで複数のテナントに対応する場合、推奨アーキテクチャを示すサンプル を用意しています。
App Router のキャッシュを無効化する方法は？
Next.js には複数のキャッシュ層があるため、キャッシュの異なる部分を無効化する方法も複数あります。キャッシュについて詳しく学ぶ
App Router で構築された包括的なオープンソースアプリケーションはありますか？
あります。Next.js Commerce または Platforms Starter Kit で、App Router を使用した大規模なオープンソースの例を確認できます。