App Router
Next.jsのApp Routerは、サーバーコンポーネント (Server Components)、Suspenseを使ったストリーミング (Streaming with Suspense)、サーバーアクション (Server Actions) といったReactの最新機能を活用してアプリケーションを構築する新しいモデルを導入しています。
App Routerの使用を開始するには、最初のページを作成 してください。
よくある質問
レイアウトでリクエストオブジェクトにアクセスするには？
生のリクエストオブジェクトには意図的にアクセスできません。ただし、サーバー専用関数を通じてheaders や cookies にアクセスできます。クッキーの設定 も可能です。
レイアウト (Layouts) は再レンダリングされません。ページ間を移動する際に不要な計算を避けるため、キャッシュされて再利用されます。レイアウトが生のリクエストにアクセスできないように制限することで、Next.jsはレイアウト内でパフォーマンスに悪影響を与える可能性のある遅いまたは高コストなユーザーコードの実行を防ぎます。
この設計はまた、異なるページ間でレイアウトの動作を一貫性があり予測可能に保ち、開発とデバッグを簡素化します。
構築するUIパターンによっては、並列ルート (Parallel Routes) を使用して同じレイアウト内で複数のページをレンダリングでき、ページはルートセグメントとURL検索パラメータにアクセスできます。
ページでURLにアクセスするには？
デフォルトでは、ページはサーバーコンポーネントです。ページのparams プロパティを通じてルートセグメントに、searchParams プロパティを通じてURL検索パラメータにアクセスできます。
クライアントコンポーネントを使用している場合は、より複雑なルートに対してusePathname、useSelectedLayoutSegment、useSelectedLayoutSegments を使用できます。
さらに、構築するUIパターンによっては、並列ルート (Parallel Routes) を使用して同じレイアウト内で複数のページをレンダリングでき、ページはルートセグメントとURL検索パラメータにアクセスできます。
サーバーコンポーネントからリダイレクトするには？
redirect を使用して、ページから相対URLまたは絶対URLにリダイレクトできます。redirect は一時的（307）リダイレクトで、permanentRedirect は永続的（308）リダイレクトです。これらの関数がUIストリーミング中に使用されると、クライアントサイドでリダイレクトを発行するためのmetaタグが挿入されます。
App Routerで認証を処理するには？
App Routerをサポートする一般的な認証ソリューションは次のとおりです：
クッキーを設定するには？
サーバーアクション (Server Actions) またはルートハンドラー (Route Handlers) でcookies 関数を使用してクッキーを設定できます。
HTTPはストリーミング開始後にクッキーを設定することを許可していないため、ページやレイアウトから直接クッキーを設定することはできません。ミドルウェア (Middleware) からもクッキーを設定できます。
マルチテナントアプリを構築するには？
単一のNext.jsアプリケーションで複数のテナントにサービスを提供する場合、推奨アーキテクチャを示すサンプル を用意しています。
App Routerのキャッシュを無効化するには？
Next.jsには複数のキャッシュ層があるため、キャッシュの異なる部分を無効化する複数の方法があります。キャッシュについて詳しく学ぶ。
App Router上に構築された包括的なオープンソースアプリケーションはありますか？
はい。Next.js Commerce またはPlatforms Starter Kit で、App Routerを使用したより大規模なオープンソースの例を確認できます。