Next.js ドキュメント通読
KeitaUenishiApp Routerに向き合うために読む
自分が知識として腹落ちしてなかったり気になっているところに関するメモ書きです
KeitaUenishiProject Structure and Organization
KeitaUenishiRouting Files
template
テンプレートファイルはレイアウトやページをラップするという点で、レイアウトに似ています。 ルート間で持続し、状態を維持するレイアウトとは異なり、テンプレートには一意のキーが与えられ、子クライアントコンポーネントはナビゲーションの際に状態をリセットします。
あまり一般的ではありませんが、お望みであれば、レイアウトではなくテンプレートを使うこともできます：
- useEffectに依存する機能（ページビューのロギングなど）やuseStateに依存する機能（ページごとのフィードバックフォームなど）。
- デフォルトのフレームワークの動作を変更する。 例えば、レイアウト内のサスペンスバウンダリは、レイアウトが最初にロードされたときのみフォールバックを表示し、ページを切り替えたときは表示しません。 テンプレートの場合、フォールバックは各ナビゲーションに表示されます。
TemplateとLayoutの違い
大きな違いとして、ページの再レンダリングがある。
- Layout : ページ遷移時に再レンダリングを行わず、状態を維持する
- Template : 新しいページ遷移ごとに再レンダリングを行う
使い分けのポイントは以下を参考
ページの再レンダリングが必要なシーンについてはこちら以外今の所思いついていない
KeitaUenishiRoute Groups and private folders
(folder)
ルーティングに影響を与えないグループルート
URLに影響を与えずにルートを整理するには、グループを作成して関連するルートをまとめてください。 括弧内のフォルダはURLから省略されます（例：(marketing)や(shop)）。
Good to know (和訳):
- ルートグループの名前は、整理すること以外に特別な意味はない。 それらはURLパスには影響しません。
- ルートグループを含むルートは、他のルートと同じURLパスに解決すべきではありません。 たとえば、ルートグループはURL構造に影響を与えないので、(marketing)/about/page.jsと(shop)/about/page.jsはどちらも/aboutに解決され、エラーを引き起こします。
- トップレベルのlayout.jsファイルなしで複数のルートレイアウトを使用する場合、ホームページ.jsファイルはルートグループの1つに定義する必要があります。
- 複数のルート・レイアウトにまたがってナビゲートすると、（クライアントサイド・ナビゲーションとは対照的に）フルページ・ロードが発生します。 例えば、app/(shop)/layout.jsを使用している/cartから、app/(marketing)/layout.jsを使用している/blogに移動すると、全ページがロードされます。 これは複数のルート・レイアウトにのみ適用されます。
KeitaUenishiParallel and Intercepted Routes
Parallel Routesとは
パラレルルートでは、同じレイアウト内で1つまたは複数のページを同時に、または条件付きでレンダリングできます。 ダッシュボードやソーシャルサイトのフィードなど、アプリの非常に動的なセクションに便利です。
並行ルートは名前付きスロットを使って作成される。 スロットは @folder の規約で定義されます。
スロットはルートセグメントではないので、URL構造には影響しません。 たとえば、/@analytics/viewsの場合、@analyticsはスロットなので、URLは/viewsになります。 スロットは通常のページコンポーネントと組み合わされ、ルートセグメントに関連付けられた最終ページを形成します。 このため、同じルートセグメントレベルでスタティックスロットとダイナミックスロットを別々に持つことはできません。 1つのスロットがダイナミックであれば、そのレベルのスロットはすべてダイナミックでなければならない。
Good to new (和訳):
-childrenプロップは暗黙のスロットで、フォルダにマッピングする必要はありません。 つまり、app/page.jsはapp/@children/page.js。
memo
Slotの意味があんまりわからなかったので調べると、同じようなことを記事の中で記載されている方がいた
スロットって？
個人的に「スロット」という言葉に聞きなじみがなかったので、英単語の意味を調べてみました。
- 細長い穴や切れ目（例：コインを入れるスロット）
- 特定の目的のための場所や位置（例：時間割のスロット）
Next.jsのドキュメントでは、2番目の意味に近いものとして使われていそうですね。
つまり、「レイアウト内の特定の場所や位置」を指しています。
いいかえると、「スロットは、ページのレイアウト内で、異なるコンテンツを挿入できる特別な場所」といえます。
Intercepting Routes
ルートをインターセプトすることで、現在のレイアウト内でアプリケーションの別の部分からルートを読み込むことができます。 このルーティングパラダイムは、ユーザーが別のコンテキストに切り替わることなく、ルートのコンテンツを表示したい場合に便利です。
たとえば、フィードの写真をクリックすると、フィードの上に写真が重なるようにモーダルで表示できます。 この場合、Next.js は /photo/123 ルートをインターセプトして URL をマスクし、/feed にオーバーレイします。