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 (streamed) y 404 para respuestas no transmitidas.

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

import Link from 'next/link'

export default function NotFound() {
  return (
    <div>
      <h2>Not Found</h2>
      <p>Could not find requested resource</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

Referencia

Props

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

Dato útil: 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 tu aplicación. Esto significa que los usuarios que visiten una URL no manejada por tu aplicación verán la interfaz exportada por el archivo app/not-found.js.

Ejemplos

Obtención de datos

Por defecto, not-found es un Componente de Servidor (Server Component). Puedes 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 = await headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  )
}

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

export default async function NotFound() {
  const headersList = await headers()
  const domain = headersList.get('host')
  const data = await getSiteData(domain)
  return (
    <div>
      <h2>Not Found: {data.name}</h2>
      <p>Could not find requested resource</p>
      <p>
        View <Link href="/blog">all posts</Link>
      </p>
    </div>
  )
}

Si necesitas usar hooks de Componente de Cliente (Client Component) como usePathname para mostrar contenido basado en la ruta, debes 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`.

Referencia

Props

Ejemplos

Obtención de datos

Historial de versiones

On this page