not-found.js

El archivo not-found se utiliza para renderizar la interfaz de usuario cuando se lanza la función notFound dentro de un segmento de ruta. Además de mostrar una interfaz personalizada, Next.js devolverá un código de estado HTTP 200 para respuestas transmitidas por flujo (streamed) y 404 para respuestas no transmitidas.

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>No encontrado</h2>
      <p>No se pudo encontrar el recurso solicitado</p>
      <Link href="/">Volver al inicio</Link>
    </div>
  )
}

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>No encontrado</h2>
      <p>No se pudo encontrar el recurso solicitado</p>
      <Link href="/">Volver al inicio</Link>
    </div>
  )
}

Importante: Además de capturar los errores esperados de notFound(), el archivo raíz app/not-found.js también maneja cualquier URL no coincidente para toda su aplicación. Esto significa que los usuarios que visiten una URL no manejada por su aplicación verán la interfaz exportada por el archivo app/not-found.js.

Props

Los componentes not-found.js no aceptan ninguna propiedad.

Obtención de datos

Por defecto, not-found es un Componente de Servidor (Server Component). Puede marcarlo como async para obtener y mostrar datos:

import Link from 'next/link'
import { headers } from 'next/headers'

export default async function NotFound() {
  const headersList = headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>No encontrado: {data.name}</h2>
      <p>No se pudo encontrar el recurso solicitado</p>
      <p>
        Ver <Link href="/blog">todas las publicaciones</Link>
      </p>
    </div>
  )
}

import Link from 'next/link'
import { headers } from 'next/headers'

export default async function NotFound() {
  const headersList = headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>No encontrado: {data.name}</h2>
      <p>No se pudo encontrar el recurso solicitado</p>
      <p>
        Ver <Link href="/blog">todas las publicaciones</Link>
      </p>
    </div>
  )
}

Si necesita usar hooks de Componente de Cliente (Client Component) como usePathname para mostrar contenido basado en la ruta, debe obtener los datos en el lado del cliente.

Historial de versiones

Versión	Cambios
`v13.3.0`	El archivo raíz `app/not-found` maneja URLs globales no coincidentes.
`v13.0.0`	Se introdujo `not-found`.

Props

Obtención de datos

Historial de versiones

On this page