default.js

El archivo default.js se utiliza para renderizar un contenido alternativo 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, Next.js mantiene el seguimiento del estado activo (subpágina) para cada slot. Sin embargo, para navegaciones duras (carga completa de página), 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 refrescar, 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 necesita crear un archivo default.js para renderizar un contenido alternativo 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 el 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 un prop sincrónico. Para mantener compatibilidad con versiones anteriores, aún puede accederlo de forma sincrónica en Next.js 15, pero este comportamiento será obsoleto en el futuro.