default.js

Le fichier default.js est utilisé pour afficher un contenu de repli dans les routes parallèles lorsque Next.js ne peut pas récupérer l'état actif d'un emplacement (slot) après un chargement complet de page.

Lors d'une navigation douce (soft navigation), Next.js conserve le suivi de l'état actif (sous-page) pour chaque emplacement. Cependant, pour les navigations complètes (chargement de page entier), Next.js ne peut pas récupérer cet état actif. Dans ce cas, un fichier default.js peut être affiché pour les sous-pages qui ne correspondent pas à l'URL actuelle.

Considérez la structure de dossier suivante. L'emplacement @team possède une page settings, mais pas @analytics.

Routes parallèles - routes non correspondantes

Lors de la navigation vers /settings, l'emplacement @team affichera la page settings tout en conservant la page actuellement active pour l'emplacement @analytics.

Lors d'un rafraîchissement, Next.js affichera un default.js pour @analytics. Si default.js n'existe pas, une erreur 404 est affichée à la place.

De plus, comme children est un emplacement implicite, vous devez également créer un fichier default.js pour afficher un contenu de repli pour children lorsque Next.js ne peut pas récupérer l'état actif de la page parente.

Référence

params (optionnel)

Une promesse qui se résout en un objet contenant les paramètres de route dynamique depuis le segment racine jusqu'aux sous-pages de l'emplacement. Par exemple :

export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>
}) {
  const { artist } = await params
}
export default async function Default({ params }) {
  const { artist } = await params
}
ExempleURLparams
app/[artist]/@sidebar/default.js/zackPromise<{ artist: 'zack' }>
app/[artist]/[album]/@sidebar/default.js/zack/nextPromise<{ artist: 'zack', album: 'next' }>
  • Comme la prop params est une promesse, vous devez utiliser async/await ou la fonction use de React pour accéder aux valeurs.
    • Dans la version 14 et antérieures, params était une prop synchrone. Pour assurer la compatibilité ascendante, vous pouvez toujours y accéder de manière synchrone dans Next.js 15, mais ce comportement sera déprécié dans le futur.

On this page