default.js

Core Idea

default.js renderiza um fallback dentro de um slot de Parallel Routes quando o Next.js não consegue recuperar o estado ativo do slot após um full-page load (hard navigation). Sem ele, um slot nomeado (@team, @analytics) retorna erro no refresh; o slot implícito children retorna 404.

Key Concepts

• Soft vs. hard navigation: em navegação client-side (soft), o Next.js rastreia a subpage ativa de cada slot; em refresh/full-page load (hard), essa informação se perde e default.js cobre a lacuna.
• params (opcional): Promise com os parâmetros dinâmicos do segmento raiz até as subpages do slot; requer async/await ou use() para acessar.
• Slot implícito children: também precisa de default.js próprio, senão retorna 404 no refresh quando o Next.js não recupera o estado do pai.

Code Examples

import { notFound } from 'next/navigation'

export default function Default() {
  notFound()
}

• O que demonstra: preservar o comportamento antigo de 404 explícito num slot nomeado, chamando notFound() dentro do default.js.

export default async function Default({
  params,
}: {
  params: Promise<{ artist: string }>
}) {
  const { artist } = await params
}

• O que demonstra: acesso a params (Promise) dentro de um default.js de slot dinâmico.

Reference Tables

Example	URL	params
app/[artist]/@sidebar/default.js	/zack	Promise<{ artist: 'zack' }>
app/[artist]/[album]/@sidebar/default.js	/zack/next	Promise<{ artist: 'zack', album: 'next' }>

Anti-patterns

• Não criar default.js para slot nomeado: gera erro em refresh, não é opcional se o slot pode ficar sem correspondência de URL.
• Não criar default.js para children: retorna 404 silencioso em vez de manter a página anterior visível.

Key Takeaways

1. default.js só entra em ação em hard navigation, nunca em navegação client-side.
2. params é assíncrono desde a v15; sincronia ainda funciona por compat mas será depreciada.
3. Combine com notFound() quando o comportamento desejado é 404 explícito em vez de fallback silencioso.

Connects To

• File-system conventions (ch111): índice das convenções.
• Dynamic Segments (ch113): mecânica de params como Promise, compartilhada por default.js, page.js, layout.js.