TL;DR
Next.js の App Router で、app ディレクトリ内に置く特別なファイルの 1 つ。Parallel Routes のために使い、Slot に表示するフォールバックの UI を定義する。
なぜ必要か
Soft navigation では、Next.js が Slot ごとに今どのページを表示しているかを覚えている。しかし、ページ全体を読み込み直す Hard navigation では、この状態を復元できない。このとき、現在の URL に一致しない Slot には default.tsx が表示される。
仕組み
公式ドキュメントには、次の挙動が書かれている。
@teamのような名前付きの Slot でdefault.tsxがないと、エラーになるchildrenも暗黙の Slot なので、親ページの状態を復元できないときのためにdefault.tsxが要る。ない場合は 404 ページになる
例
以前のように 404 を返したい場合は、notFound() を呼ぶ default.tsx を置く。
import { notFound } from "next/navigation"
export default function Default() {
notFound()
}注意点
拡張子は .tsx でなくてもよく、.jsx や .js でもよい。