メインコンテンツまでスキップ

default.js

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

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

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

Parallel Routesのマッチしないルート

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

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

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

Props

params(任意)

Route Segmentからスロットのサブページまでの 動的ルートパラメータ を含むオブジェクトです。例:

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

Parallel Routesの詳細を学ぶ

Parallel Routes