default.js
default.js
ファイルは、Next.jsが全ページロード後、スロットのアクティブな状態を復元できない場合、Parallel Routes内でフォールバックをレンダリングするために使用されます。
ソフトナビゲーション中に、Next.jsは各スロットのアクティブなstate(サブページ)を追跡します。しかし、ハードナビゲーション(全ページロード)では、Next.jsはアクティブな状態を復元できません。この場合、現在のURLとマッチしないサブページに対してdefault.js
ファイルがレンダリングされます。
以下のフォルダー構造を考えてみましょう。 @team
スロットは settings
ページを持っていますが、@analytics
は持っていません。
/dashboard/settings
に移動すると、 @team
スロットは settings
ページをレンダリングし、 @analytics
スロットの現在アクティブなページを保持します。
リフレッシュすると、Next.jsは @analytics
の default.js
をレンダリングします。 default.js
が存在しない場合は、代わりに 404
がレンダリングされます。
さらに children
は暗黙のスロットであるため、親ページのアクティブな状態をNext.jsが復元できない場合、children
のフォールバックをレンダリングするために default.js
ファイルを作成する必要があります。
Props
params
(任意)
Route Segmentからスロットのサブページまでの 動的ルートパラメータ を含むオブジェクトです。例:
例 | URL | params |
---|---|---|
app/@sidebar/[artist]/default.js | /zack | { artist: 'zack' } |
app/@sidebar/[artist]/[album]/default.js | /zack/next | { artist: 'zack', album: 'next' } |