App Router
本ページは以下のページを翻訳したものになります。
https://nextjs.org/docs/canary/app
公式ドキュメントのサイドバーのメニューには表示されおりませんが、上記URLから本ページの翻訳元のページを確認することができます。
Next.js の App Router は、Server Components、Suspense を使用したストリーミング、および Server Actions といった React の最新機能を活用したアプリケーション構築のための新しいモデルを導入します。
最初のページを作成することから App Router の利用を開始しましょう。
よくある質問
レイアウトでリクエストオブジェクトにアクセスする方法は？
意図的に生のリクエストオブジェクトにアクセスすることはできませんが、サーバー関数を通じてheadersとcookiesにアクセスできます。また、クッキーを設定することもできます。
Layoutsは再レンダリングされません。ページ間を移動する際に無駄な計算を避けるためにキャッシュされ、再利用されることがあります。レイアウトで生のリクエストにアクセスすることを制限することにより、Next.jsはレイアウト内でユーザーコードの実行を防ぎ、それによりパフォーマンスへの悪影響を防ぎます。
この設計により、異なるページでのレイアウトの一貫した予測可能な動作が保証され、開発とデバッグが簡素化されます。
構築するUIパターンに応じて、Parallel Routesを使用すると、同じレイアウトで複数のページをレンダリングでき、ページはルートセグメントやURL検索パラメータにもアクセスできます。
ページ上のURLにアクセスする方法は？
デフォルトでは、ページは Server Component です。指定されたページのルートセグメントにはparamsプロップを通じて、URL検索パラメータにはsearchParamsプロップを通じてアクセスできます。
Client Component を使用している場合、より複雑なルートのために usePathname、useSelectedLayoutSegment、および useSelectedLayoutSegments を使用できます。
さらに、構築するUIパターンに応じて、Parallel Routesを使用すると、同じレイアウトで複数のページをレンダリングでき、ページはルートセグメントやURL検索パラメータにもアクセスできます。
Server Component からリダイレクトする方法は？
ページから相対または絶対URLへのリダイレクトにはredirectを使用できます。redirectは一時（307）リダイレクトで、permanentRedirectは永続的な（308）リダイレクトです。UIをストリーミングしている間にこれらの関数が使用されると、クライアント側でリダイレクトを発行するためにメタタグが挿入されます。
App Routerを使用して認証を扱う方法は？
以下に、App Routerをサポートする一般的な認証ソリューションを示します：
- NextAuth.js
- Clerk
- Stack Auth
- Auth0
- Stytch
- Kinde
- WorkOS
- または、セッションやJWTを手動で取り扱う方法もあります
Cookie を設定する方法は？
Cookieは、Server ActionsまたはRoute Handlersを使用して、cookies関数を利用して設定できます。
HTTPはストリーミング開始後にcookieを設定することを許可しないため、ページやレイアウトから直接cookieを設定することはできません。Middlewareからクッキーを設定することもできます。
マルチテナントアプリを構築する方法は？
複数のテナントに対応する単一の Next.js アプリケーションを構築しようとしている場合、推奨アーキテクチャを示した例を作成しています。
App Routerキャッシュを無効化する方法は？
Next.jsには複数のキャッシュレイヤーが存在するため、キャッシュの異なる部分を無効化するためのさまざまな方法があります。キャッシュについ て詳しく学ぶ。
App Routerを基に構築された包括的でオープンソースのアプリケーションはありますか？
はい。Next.js Commerce や Platforms Starter Kit を見ることができ、これらはオープンソースで利用できる App Router を使用した大規模な例です。