Menu

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が存在しない場合、名前付きスロット(@team@analyticsなど)に対してエラーが返され、続行するにはdefault.jsを定義する必要があります。これらの状況で従来の404を返す動作を保持したい場合は、以下を含むdefault.jsを作成できます。

app/@team/default.js
import { notFound } from 'next/navigation'
 
export default function Default() {
  notFound()
}

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

リファレンス

params(オプション)

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

app/[artist]/@sidebar/default.js
TypeScript
export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>
}) {
  const { artist } = await params
}
URLparams
app/[artist]/@sidebar/default.js/zackPromise<{ artist: 'zack' }>
app/[artist]/[album]/@sidebar/default.js/zack/nextPromise<{ artist: 'zack', album: 'next' }>
  • paramsプロップはプロミスであるため、値にアクセスするにはasync/awaitまたはReactのuse関数を使用する必要があります。
    • バージョン14以前では、paramsは同期的なプロップでした。後方互換性を支援するため、Next.js 15では引き続き同期的にアクセスできますが、この動作は将来廃止される予定です。