default.js

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

ソフトナビゲーション中、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

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 プロップはプロミスであるため、その値にアクセスするには async/await または React の use 関数を使用する必要があります。
  • バージョン14以前では、params は同期プロップでした。後方互換性を保つために、Next.js 15でも同期的にアクセスできますが、この動作は将来的にdeprecatedされます。