App Router
Next.js App Router は、Server Components、Suspense を用いた Streaming、およびServer Actionsなど、React の最新機能を使用したアプリケーション構築の新しいモデルを紹介します。
App Router を使い始めるには、最初のページを作成します。
Frequently Asked Questions
Layout 内で request object にどのようにアクセスできますか？
あなたは意図的に生の request object にアクセスすることはできません。しかし、headersやcookiesはサーバー専用の関数を通じてアクセス可能です。また、cookies を設定することもできます。
layoutsは再 rendering しません。ページ間の移動時に不要な計算を避けるために、cache 化して再利用することができます。layout からの生の request へのアクセスを制限することで、Next.js は、パフォーマンスに悪影響を及ぼす可能性のある遅いまたは高価なユーザーの code の実行を防ぐことができます。layout 内での。
このデザインは、異なるページ間での Layout の一貫した予測可能な振る舞いも強制し、development と debugging を簡素化します。
あなたが作っている UI パターンによって、Parallel Routesは同じ layout 内で複数のページを render することを可能にし、ページは route セグメントと同様に URL の検索 params にアクセスできます。
ページ上の URL にどのようにアクセスできますか？
default では、ページは Server Components です。特定のページについて、paramsプロップを通じて route のセグメントにアクセスしたり、searchParamsプロップを通じて URL の検索 params にアクセスすることができます。
もし Client Components を使用しているなら、より複雑な routes のために、usePathname、useSelectedLayoutSegment、そしてuseSelectedLayoutSegmentsを使うことができます。
さらに、構築中の UI パターンによりますが、Parallel Routesは同じ layout 内で複数のページを render でき、ページは route セグメントと URL search params にアクセスできます。
私はどのように ServerComponent から redirect できますか？
あなたはredirectを使用して、ページから相対的または絶対的な URL に redirect することができます。redirectは一時的な(307)redirect であり、一方permanentRedirectはパーマネント(308)redirect です。これらの機能がストリーミング UI を使用しているときには、client サイドで redirect を発生させるためのメタタグを挿入します。
Approuter での認証処理はどのように行えますか？
これらは、App Router をサポートする一般的な認証ソリューションの一部です：
- NextAuth.js
- Clerk
- Auth0
- Stytch
- Kinde
- または手動でセッションや JWTs を処理する
私はどのように Cookies を設定できますか？
あなたは Server Actions または Route Handlers で cookies 関数を使用して、cookies を設定することができます。
HTTP は Streaming が開始した後での cookies の設定を許可していないため、ページや layout から直接 cookies を設定することはできません。また、Middlewareから cookies を設定することもできます。
私はどのように build マルチテナントアプリを作成できますか？
もし一つの Next.js アプリケーションを build して、複数のテナントに提供したいのであれば、我々が推奨するアーキテクチャを示すbuilt an example を作成しました。
App Router キャッシュはどのように無効化できますか？
Next.js では複数のキャッシング層があり、したがって、cache の異なる部分を無効にするための複数の方法があります。キャッシングについてもっと学ぶ。
App router 上に構築された包括的でオープンソースのアプリケーションはありますか？
はい。オープンソースの App Router の使用例として、大きな 2 つの例としてNext.js Commerce またはPlatforms Starter Kit を参照できます。