Tabs using Parallel Routes with Next.js App Router

次のようなディレクトリ構造を例にする。

1
app
2
├── layout.tsx
3
├── page.tsx
4
└── @tab
5
    ├── page.tsx
6
    └── new
7
        └── page.tsx

App Router では、@から始まるディレクトリのページを上位のlayout.tsxで受け取れる。

1
export default Layout({ children, tab }){
2
    return (
3
        <div>
4
            <nav>
5
                <Link href="/">Home Tab</Link>
6
                <Link href="/new">New Tab</Link>
7
            </nav>
8
            <div>
9
                {children}
10
                {tab}
11
            </div>
12
        </div>
13
    );
14
}

これだけで、パスに応じてtabが切り替わる。ただし、これだと/newsにアクセスした状態でリロードすると 404 が表示される。

Parallel Routes にリロード耐性を付ける#

なぜ 404 が表示されるかというと、/newに対応するapp/new/page.tsxが存在しないからである。Parallel routes では、1 つでも対応していないルートが存在すると 404 になる。

app/default.tsxを配置することで、これを回避できる。 default.tsxは、ハードナビゲーション時に対応するルートがない場合のフォールバックを提供する。

https://nextjs.org/docs/app/api-reference/file-conventions/default

これは逆のパターンでも発生する。例えばapp/about/page.tsxが存在する場合、app/@tab/about/page.tsxが存在しないため、/aboutにアクセスすると 404 が表示される。この場合、app/@tab/default.tsxを配置することで回避できる。

Parallel Routes を扱うときは`default.tsx`が大事#

つまり、次のようなディレクトリ構造にしておくことで、アプリが拡張されていく中で意図せず 404 が表示されたり、リロード耐性が失われることを避けることができる。

1
app
2
├── layout.tsx
3
├── page.tsx
4
├── default.tsx
5
└── @tab
6
    ├── page.tsx
7
    ├── default.tsx
8
    └── new
9
        └── page.tsx

Parallel Routes にリロード耐性を付ける#

Parallel Routes を扱うときはdefault.tsxが大事#

Parallel Routes を扱うときは`default.tsx`が大事#