default.js

El archivo default.js se utiliza para renderizar un fallback dentro de Rutas Paralelas cuando Next.js no puede recuperar el estado activo de un slot después de una carga completa de página.

Durante la navegación suave (soft navigation), Next.js mantiene el seguimiento del estado activo (subpágina) para cada slot. Sin embargo, para navegaciones duras (full-page load), Next.js no puede recuperar el estado activo. En este caso, se puede renderizar un archivo default.js para subpáginas que no coincidan con la URL actual.

Considere la siguiente estructura de carpetas. El slot @team tiene una página settings, pero @analytics no.

Rutas paralelas con rutas no coincidentes

Al navegar a /settings, el slot @team renderizará la página settings mientras mantiene la página actualmente activa para el slot @analytics.

Al actualizar la página, Next.js renderizará un default.js para @analytics. Si default.js no existe, se renderizará un 404 en su lugar.

Adicionalmente, dado que children es un slot implícito, también necesitará crear un archivo default.js para renderizar un fallback para children cuando Next.js no pueda recuperar el estado activo de la página padre.

Referencia

params (opcional)

Una promesa que se resuelve en un objeto que contiene los parámetros de ruta dinámica desde el segmento raíz hasta las subpáginas del slot. Por ejemplo:

export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>
}) {
  const { artist } = await params
}
export default async function Default({ params }) {
  const { artist } = await params
}
EjemploURLparams
app/[artist]/@sidebar/default.js/zackPromise<{ artist: 'zack' }>
app/[artist]/[album]/@sidebar/default.js/zack/nextPromise<{ artist: 'zack', album: 'next' }>
  • Dado que la prop params es una promesa, debe usar async/await o la función use de React para acceder a los valores.
    • En la versión 14 y anteriores, params era una prop síncrona. Para mantener compatibilidad con versiones anteriores, aún puede acceder a ella de forma síncrona en Next.js 15, pero este comportamiento será obsoleto en el futuro.

On this page