app/not-found.tsx – Pagina personalizată 404 (notFound()) în Next.js

export default function NotFound() {
  return <h2>Pagina solicitată nu a fost găsită (404)</h2>;
}

Ce face app/not-found.tsx - Pagina personalizată 404 (notFound())

Fișierul not-found.tsx definește pagina afișată atunci când utilizatorul accesează un URL invalid.

De asemenea, poate fi declanșat programatic din interiorul oricărui Server Component sau Route Handler prin apelarea funcției notFound() din `next/navigation` (de exemplu dacă un articol cu ID-ul cerut nu există în baza de date).

Returnează întotdeauna codul de stare HTTP real `404 Not Found` către browser și motoarele de căutare.

Exemple

Exemplul 1: Declanșarea paginii 404 atunci când resursa lipsește din baza de date

Oprește execuția și trimite răspuns 404.

import { notFound } from 'next/navigation';

export default async function ArticolPage({ params }: { params: { slug: string } }) {
  const articol = await preiaArticolDinBaza(params.slug);
  
  if (!articol) {
    notFound(); // Afișează automat not-found.tsx cu cod HTTP 404
  }

  return <h1>{articol.titlu}</h1>;
}

Ieșire în terminal

Browserul primește cod HTTP 404 și conținutul din not-found.tsx.

Greșeli frecvente

• Redirecționarea manuală către o rută ‘/404’ cu redirect(); acest lucru schimbă codul de stare în 302 sau 200, dăunând grav indexării SEO.

Comenzi înrudite

• app/error.tsx - Gestionarea erorilor neașteptate (Error Boundary): Izolează erorile din componentele copil și afișează o interfață prietenoasă de recuperare cu buton de reîncercare.
• redirect() și permanentRedirect() - Redirecționări programatice pe server: Oprește execuția curentă pe server și trimite un răspuns HTTP de redirecționare către client.
• app/page.tsx - Definirea conținutului specific al unei rute: Fișierul special care face ca un segment de rută să fie accesibil public printr-un URL în browser.