Next.js 44: Rutas interceptoras (Intercepting Routes)
easy⏱ 5 mincoursenextjs
Dos page.tsx, una sola URL
Tanto app/@modal/(..)photo/[id]/page.tsx como app/photo/[id]/page.tsx pueden renderizar para /photo/3 — cuál gana depende de cómo llegaste. Los segmentos (..) significan 'sube N niveles en la URL', permitiendo que la ruta del modal viva en una carpeta distinta a la URL que intercepta.
app/
@modal/
(..)photo/[id]/page.tsx // rendered as a modal, intercepts /photo/[id]
photo/[id]/
page.tsx // full page — used on direct visit/refresh
layout.tsx // renders {children} AND {modal}
page.tsx // the gallery
// app/layout.tsx
export default function Layout({
children,
modal,
}: {
children: React.ReactNode;
modal: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
{modal}
</body>
</html>
);
}
Abre, luego simula el 'refresh'
Haz clic en una foto para abrirla en el modal — la galería debe seguir visible detrás. Luego haz clic en Simulate refresh on this URL para ver lo que mostraría un reload real de /photo/id: solo la página completa, sin galería, porque la interceptación solo aplica a la navegación del lado del cliente.
Por qué existe este patrón
Las rutas interceptoras dan URLs compartibles, guardables como marcador y a prueba de refresh para contenido que normalmente se muestra como modal (lightbox de fotos, diálogos de login, vista rápida de productos) — sin construir a mano la lógica de ruteo del modal. La URL siempre refleja lo que hay en pantalla, en ambos casos.