378文字
2分
編集

Tabs using Parallel Routes with Next.js App Router

#Next.js #React

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

txt
app
├── layout.tsx
├── page.tsx
└── @tab
    ├── page.tsx
    └── new
        └── page.tsx

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

tsx
// app/layout.tsx
export default Layout({ children, tab }){
    return (
        <div>
            <nav>
                <Link href="/">Home Tab</Link>
                <Link href="/new">New Tab</Link>
            </nav>
            <div>
                {children}
                {tab}
            </div>
        </div>
    );
}

これだけで、パスに応じて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 が表示されたり、リロード耐性が失われることを避けることができる。

txt
app
├── layout.tsx
├── page.tsx
├── default.tsx
└── @tab
    ├── page.tsx
    ├── default.tsx
    └── new
        └── page.tsx
編集