default.js

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

ソフトナビゲーション中、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が親ページのアクティブな状態を復元できない場合にフォールバックをレンダリングするためのdefault.jsファイルを作成する必要があります。

リファレンス

params（オプション）

rootセグメントからスロットのサブページまでの動的ルートパラメータを含むオブジェクトに解決されるプロミスです。例えば：

TypeScript

app/[artist]/@sidebar/default.js

export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>
}) {
  const artist = (await params).artist
}

JavaScript

app/[artist]/@sidebar/default.js

export default async function Default({ params }) {
  const artist = (await params).artist
}

例	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ではまだ同期的にアクセスできますが、この動作は将来的に廃止される予定です。