App Router
Next.jsのApp Routerは、サーバーコンポーネント、Suspenseを使ったストリーミング、サーバーアクションなどのReactの最新機能を使用したアプリケーション構築の新しいモデルを導入します。
最初のページを作成することで、App Routerを始めましょう。
よくある質問
レイアウト内でリクエストオブジェクトにアクセスするにはどうすればよいですか？
意図的に生のリクエストオブジェクトにアクセスすることはできません。ただし、サーバー専用の関数を通じてheadersとcookiesにアクセスできます。また、クッキーを設定することもできます。
レイアウトは再レンダリングされません。ページ間のナビゲーション時に不要な計算を避けるため、キャッシュされ再利用できます。レイアウトから生のリクエストへのアクセスを制限することで、パフォーマンスに悪影響を与える可能性のある低速または高コストなユーザーコードをレイアウト内で実行することを防ぐことができます。
このデザインにより、異なるページ間でレイアウトの一貫性と予測可能な動作を強制し、開発とデバッグを簡素化します。
構築するUIパターンによっては、並列ルートにより、同じレイアウト内で複数のページをレンダリングでき、ページはルートセグメントとURLの検索パラメータにもアクセスできます。
ページでURLにアクセスするにはどうすればよいですか？
デフォルトでは、ページはサーバーコンポーネントです。特定のページのparamsプロップを通じてルートセグメントに、searchParamsプロップを通じてURLの検索パラメータにアクセスできます。
クライアントコンポーネントを使用している場合は、より複雑なルートに対してusePathname、useSelectedLayoutSegment、useSelectedLayoutSegmentsを使用できます。
さらに、構築するUIパターンによっては、並列ルートにより、同じレイアウト内で複数のページをレンダリングでき、ページはルートセグメントとURLの検索パラメータにもアクセスできます。
サーバーコンポーネントからリダイレクトするにはどうすればよいですか？
redirectを使用して、相対または絶対URLにリダイレクトできます。redirectは一時的な（307）リダイレクト、permanentRedirectは永久的な（308）リダイレクトです。これらの関数をUIストリーミング中に使用すると、クライアント側でリダイレクトを実行するメタタグを挿入します。
App Routerで認証を処理するにはどうすればよいですか？
App Routerをサポートする一般的な認証ソリューションは以下の通りです：
- NextAuth.js
- Clerk
- Stack Auth
- Auth0
- Stytch
- Kinde
- WorkOS
- またはセッションやJWTを手動で処理
クッキーを設定するにはどうすればよいですか？
サーバーアクションまたはルートハンドラでcookies関数を使用してクッキーを設定できます。
HTTPではストリーミング開始後にクッキーを設定できないため、ページやレイアウトから直接クッキーを設定することはできません。ミドルウェアからもクッキーを設定できます。
マルチテナントアプリを構築するにはどうすればよいですか？
複数のテナントに対応する単一のNext.jsアプリケーションを構築したい場合は、推奨するアーキテクチャを示したサンプルを用意しています。
App Routerのキャッシュを無効化するにはどうすればよいですか？
Next.jsには複数のキャッシュレイヤーがあり、異なるキャッシュ部分を無効化する方法も複数あります。キャッシュについて詳しく学ぶ。
App Routerを使用した包括的でオープンソースのアプリケーションはありますか？
はい。Next.js CommerceやPlatforms Starter KitをApp Routerを使用したより大規模な例として参照できます。