default.js
default.js
ファイルは、Next.jsがフルページロード後にslotのアクティブな状態を復元できない場合に、Parallel Routes内でフォールバックをレンダリングするために使用されます。
ソフトナビゲーション中、Next.jsは各slotのアクティブな状態(サブページ)を追跡します。しかし、ハードナビゲーション(フルページロード)の場合、Next.jsはアクティブな状態を復元できません。この場合、現在のURLと一致しないサブページに対してdefault.js
ファイルをレンダリングすることができます。
次のフォルダ構造を考えてみましょう。@team
slotにはsettings
ページがありますが、@analytics
にはありません。


/settings
にナビゲートすると、@team
slotはsettings
ページをレンダリングし、@analytics
slotの現在アクティブなページを維持します。
リフレッシュ時には、Next.jsは@analytics
に対してdefault.js
をレンダリングします。default.js
が存在しない場合は、代わりに404
がレンダリングされます。
さらに、children
は暗黙のslotであるため、Next.jsが親ページのアクティブな状態を復元できない場合にフォールバックをレンダリングするためのdefault.js
ファイルを作成する必要があります。
リファレンス
params
(オプション)
rootセグメントからslotのサブページまでの動的ルートパラメータを含むオブジェクトに解決されるプロミスです。例えば:
- TypeScript
- JavaScript
app/[artist]/@sidebar/default.js
export default async function Default({
params,
}: {
params: Promise<{ artist: string }>
}) {
const { artist } = await params
}
app/[artist]/@sidebar/default.js
export default async function Default({ params }) {
const { artist } = await params
}
例 | URL | params |
---|---|---|
app/[artist]/@sidebar/default.js | /zack | Promise<{ artist: 'zack' }> |
app/[artist]/[album]/@sidebar/default.js | /zack/next | Promise<{ artist: 'zack', album: 'next' }> |
params
propはプロミスであるため、値にアクセスするにはasync/await
またはReactのuse
関数を使用する必要があります。- バージョン14以前では、
params
は同期的なpropでした。後方互換性を考慮して、Next.js 15では同期的にアクセスすることも可能ですが、この動作は将来的に廃止される予定です。
- バージョン14以前では、