App Router

Next.js App Routerは、Server Components、Suspenseによるストリーミング、Server Actionsなど、Reactの最新機能を使用してアプリケーションを構築するための新しいモデルを導入します。

最初のページを作成して、App Routerを始めましょう。

よくある質問

レイアウトでリクエストオブジェクトにアクセスするにはどうすればよいですか？

生の`request`オブジェクトには意図的にアクセスできません。ただし、サーバー専用関数を通じて`headers`と`cookies`にアクセスできます。また、クッキーを設定することも可能です。

レイアウトは再レンダリングされません。ページ間のナビゲーション時に不要な計算を避けるため、キャッシュされて再利用されます。レイアウトが生の`request`にアクセスすることを制限することで、Next.jsはレイアウト内で潜在的に低速または高コストなユーザーコードの実行を防ぎ、パフォーマンスへの悪影響を回避できます。

この設計により、異なるページ間でのレイアウトの一貫した予測可能な動作も強制され、開発とデバッグが簡素化されます。

構築しているUIパターンに応じて、並列ルーティングを使用すると、同じレイアウトで複数のページをレンダリングでき、ページはルートセグメントとURL検索パラメータにアクセスできます。

ページでURLにアクセスするにはどうすればよいですか？

デフォルトでは、ページはサーバーコンポーネントです。特定のページでは、`params`プロップを通じてルートセグメントに、`searchParams`プロップを通じてURL検索パラメータにアクセスできます。

クライアントコンポーネントを使用している場合は、より複雑なルートに対して`usePathname`、`useSelectedLayoutSegment`、および`useSelectedLayoutSegments`を使用できます。

さらに、構築しているUIパターンに応じて、並列ルーティングを使用すると、同じレイアウトで複数のページをレンダリングでき、ページはルートセグメントとURL検索パラメータにアクセスできます。

サーバーコンポーネントからリダイレクトするにはどうすればよいですか？

ページから相対URLまたは絶対URLへリダイレクトするには、`redirect`を使用できます。`redirect`は一時的な (307) リダイレクトであり、`permanentRedirect`は永続的な (308) リダイレクトです。これらの関数がUIのストリーミング中に使用されると、クライアント側でリダイレクトを発行するためのメタタグが挿入されます。

App Routerで認証を処理するにはどうすればよいですか？

App Routerをサポートする一般的な認証ソリューションをいくつか紹介します。

• NextAuth.js
• Clerk
• Stack Auth
• Auth0
• Stytch
• Kinde
• WorkOS
• または、セッションやJWTを手動で処理する

クッキーを設定するにはどうすればよいですか？

`cookies`関数を使用して、Server ActionsまたはRoute Handlersでクッキーを設定できます。

HTTPはストリーミング開始後のクッキー設定を許可しないため、ページまたはレイアウトから直接クッキーを設定することはできません。代わりに、ミドルウェアからクッキーを設定することもできます。

マルチテナントアプリを構築するにはどうすればよいですか？

複数のテナントにサービスを提供する単一のNext.jsアプリケーションを構築したい場合は、推奨されるアーキテクチャを示す例を構築しました。

App Routerのキャッシュを無効にするにはどうすればよいですか？

Next.jsには複数のキャッシュレイヤーがあり、したがってキャッシュの異なる部分を無効にする複数の方法があります。キャッシュについて詳しく学ぶ。

App Routerで構築された包括的なオープンソースアプリケーションはありますか？

はい。オープンソースであるApp Router使用の大きな例として、Next.js CommerceまたはPlatforms Starter Kitを参照してください。

さらに学ぶ

• ルーティングの基本
• データフェッチとキャッシュ
• インクリメンタル静的再生成
• フォームとミューテーション
• キャッシュ
• レンダリングの基本
• サーバーコンポーネント
• クライアントコンポーネント