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>
  )
}

Nota 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 prop.

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>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 = 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>
  )
}

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