Parallel RoutesとIntercepting Routesを使用したモーダル実装
今回は、Next.jsのルーティング新機能であるParallel RoutesとIntercepting Routesを使用してモーダルを実装する方法を紹介します。
今回作成したページ
紹介するにあたり作成したサンプルページがありますので、こちらを基に説明します。
基本的にコードは書かずに説明していく形になりますので、確認したい場合はリポジトリを参照してください。
内容はDog APIを使用した犬の一覧ページになります。
仕様
犬画像をクリックするとモーダルが現れ、そのままリロードをかけると詳細ページに遷移します。
ポイントはモーダル表示から詳細ページまでの遷移です。
これらの挙動はParallel RoutesとIntercepting Routesを使用することで実現しています。
Parallel Routes
概要
複数のページを1つのレイアウト内に同時に、または条件付きでレンダリングすることを可能にする機能です。
使用する際はいくつかお作法があります。
- フォルダ名の先頭に
@をつける。 - 表示させたいページまでのセグメントを合わせた構造にする。
- layout.tsxから使用する。
コード解説
今回は詳細ページにモーダルを表示させるため、@modal/dogs/[breed]/[id]/page.tsxを作成します。そして、layout.tsxでスロット名（今回はmodal）を指定して表示させるようにします。
これで/dogs/[breed]/[id]にアクセス後モーダルが表示されます。しかしこのままだと詳細ページに遷移してモーダル表示されてしまいます。
そこで使用されるのがIntercepting Routesです。
Intercepting Routes
概要
ルートをインターセプト（横取り）できる機能です。現在のレイアウト内のアプリケーションの別の部分からルートを読み込むことができます。
こちらも使用する際にお作法があります。
- 対象ディレクトリの先頭に(..)をつける。カッコ内はあくまで対象ディレクトリまでの相対パスであることに注意する。
コード解説
今回は@modal/(.)dogs/[breed]/[id]とすることで、/dogs/[breed]/[id]にアクセス後詳細ページを表示することなくモーダルを表示させることが可能です。
ちょっと整理する
- モーダル表示時に詳細ページのURLに変更する。
- Parallel Routesを使用してモーダルを表示させる。
- そのままだと詳細ページ上でモーダルが表示されるので、Intercepting Routesを使用しモーダル表示時に詳細ページを表示させない（ページを横取りする）。
今回実装したモーダルはどちらか一方だけでは実現できないため、両方を組み合わせることで実現しています。
さいごに
今回はParallel RoutesとIntercepting Routesを使用してモーダルを実装する方法を紹介しました。
最初は難しく感じますが、複雑なレイアウトを実現する際には非常に便利な機能ですので、ぜひ活用してみてください。
また解釈等に間違いがあれば指摘していただけると幸いです。
Discussion