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