Next.jsのParallel RoutesとIntercepting Routesについて簡単な解説

最近プライベートで開発していて、Parallel Routes と Intercepting Routes を使った場面があったのですが。

意外と日本語の情報が少なく、AI もあんまりピンと来る回答を返してこなかったのでざっくり解説を。

Parallel Routes とは

ざっくり言うと、同じ layout 内で複数のページを並列にレンダリングできる仕組みのこと。

例えば、詳細画面だけど一覧画面も表示したい、とかそんな感じ。

フォルダ名の先頭に @ （例：@modal）をつけると、layout 側で props の children（例：modal）としてが流れ込んできます。

詳細をモーダルで表示したいケースとかで便利ですね。

あとは Jira のバックログみたいに、サイドバーでバックログの詳細を表示するケースもピッタリ。

Intercepting Routes とは

ざっくり言うと、画面遷移時に表示する画面と、直接遷移時に表示する画面をわける仕組みのこと。

例えば、一覧画面から詳細画面への遷移時と、詳細画面への直接遷移時では別の画面を表示したい、とかそんな感じ。

フォルダ名の先頭に (.) や (..)、(...) をつけると、つけた内容に紐づいて path をインターセプトします。

非常に重要なポイントとして、Intercepting Routes 自体は layout などの要素は関係ないです。

組み合わせると

めちゃめちゃベーシックな例としては。

• 一覧から詳細画面への遷移時：背景に一覧を表示しつつ詳細をモーダルで表示する
• 詳細画面へ直接遷移時：詳細画面を表示する

みたいなことが可能ってことですね。

なので一覧のスクロールバーの位置のリセットが行われないのはかなり大きなメリットだなと。

注意

面白くて便利な機能なんですが、routes と描画の兼ね合いでまだバグが多い印象です。

「仕様通り動かんやんけ！！」となっても大体 Issue が上がっているので、しっかり参照しましょう。

備考

Parallel Routes だけを使うケースは結構あるのかなという印象で、Intercepting Routes だけを使うケースって結構めずらしいんじゃないかなーと思います。

Jira 以外にも、Instagram のモーダル表示や、YouTube のピクチャーインピクチャーなんかはここらへんを使ってるんでしょうね。

最近海外系のサービスで、妙に小賢しい（失礼）機能や描画が増えたなと思っていたんですが、なるほどって感じです。

結構使いどころの多い機能だなと思いつつ、実装の難易度は確実に増している印象です。

保守の難易度も確実に上がっていると思うので、最初はシンプルに作ってあとから加える、くらいでも十分かなと。

そう考えると、今まで無理やり実装していた部分がシンプルに落とし込めるのはすごく良いですね。