Next.js@15 Parallel Routesを使ってみただけ

とある所用で、またNext.jsを触ることになりました。
Modalを簡単に実装したいなぁという軽い気持ちがあったので、最近追加されてたParallel Routesを使ってModalを作ってみようとそういう魂胆です。

Parallel Routesとは？

Next.jsのApp Routerに追加された機能で、同じURLに対して複数のルートを持つことができるようになります。
まぁ、要するに一回目と二回目で違うコンポーネントを表示できるようになるということです。強そうですね。

Modalを作る

とりあえず、今回の目標はmodalです。modalを作ってみましょうね！
新しく私は@modalというディレクトリをappディレクトリ内で作成しました。Parallel Routesを使うためには、@をつけてあげる必要があります。

詳しい説明はググってください。べつに使い方を説明するわけではないので・・・

所感

かんたんでしたね。まぁ。うん。
ですが時々めんどくさいなぁと思う部分もありましたがまぁ普通のCSRで作るよりは楽でした。

浮き彫りな問題点

ここからは私の個人的な意見です。

1. Modalを閉じるために多岐にわたった方法があり割とわかりずらい。

next/navigationのrouter.back()を使ったり、push()を使ったり、どれを使うのかが分からん。
最初混乱しましたね。

2. Modalがページ遷移してるのに閉じない

~~イライラしますね。~~普通になんかページ遷移したら閉じてほしいところですね。

3. (AppRouter全般に言えること) ページ構造が終わる

普通にこれはAppRouterという仕組みが悪いと思います。
ディレクトリ -> page.tsx等ページファイルという構造は、ミニマムなアプリとかなら全然いいと思います。
ただどんどん規模が大きくなったり、今回みたいなParallel Routesとかを使うとディレクトリのツリーが大惨事になって非常にわかりずらいです。

例：

app / @modal / hoge / page.tsx
                    / (components) / component.tsx
                    / (actions)    / action.ts
    / @modal / fuga / page.tsx
    / @modal / piyo / page.tsx
    / piyo / page.tsx
    / hoge / page.tsx
           / (components) / component.tsx
           / (actions)    / action.ts
    / fuga / page.tsx
    / global.css
    / page.tsx
    / layout.tsx

まぁ、ここは慣れなきゃいけないんですかね・・・
たぶん使う人の技量にもよりますよね。私は初めてだったのでたぶんうまく使いこなせてないのかなぁって感じです。

結論

AppRouterだからこそのParallel Routesは非常に便利でした。まぁこれから使う機会があれば使うかな・・・？程度ですが。