default.js

default.js ファイルは、パラレルルート 内でフォールバックをレンダリングするために使用されます。Next.js がフルページロード後に スロット のアクティブな状態を復元できない場合に利用されます。

ソフトナビゲーション 中、Next.js は各スロットのアクティブな 状態(サブページ)を追跡します。しかし、ハードナビゲーション(フルページロード)の場合、Next.js はアクティブな状態を復元できません。この場合、現在の URL にマッチしないサブページに対して default.js ファイルがレンダリングされます。

以下のフォルダ構造を考えてみましょう。@team スロットには settings ページがありますが、@analytics にはありません。

パラレルルートのマッチしないルート

/settings にナビゲートすると、@team スロットは settings ページをレンダリングし、@analytics スロットの現在アクティブなページを維持します。

ページをリフレッシュすると、Next.js は @analytics に対して default.js をレンダリングします。default.js が存在しない場合、代わりに 404 がレンダリングされます。

さらに、children は暗黙的なスロットであるため、Next.js が親ページのアクティブな状態を復元できない場合に children のフォールバックをレンダリングするためにも default.js ファイルを作成する必要があります。

Props

params (任意)

ルートセグメントからスロットのサブページまでの ダイナミックルートパラメータ を含むオブジェクト。例:

URLparams
app/@sidebar/[artist]/default.js/zack{ artist: 'zack' }
app/@sidebar/[artist]/[album]/default.js/zack/next{ artist: 'zack', album: 'next' }