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