Hibakezelés mélyebben

notFound, redirect, globális hibák, auth státuszok és szerver oldali vezérlési folyamat.

17. Hibakezelés mélyebben

Az App Router fájl alapú hibakezelőket ad: error.tsx, not-found.tsx, global-error.tsx. Emellett a szerveren redirect, notFound, és (ahol elérhető) auth-specifikus segédfüggvények vezérelhetik a folyamatot.

notFound() és not-found.tsx

Ha egy erőforrás létezik az URL-ben, de nincs adat (pl. rossz slug), a notFound() megszakítja a renderelést és a legközelebbi not-found.tsx-et mutatja:

import { notFound } from 'next/navigation'

export default async function PostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)
  if (!post) notFound()
  return <article>{post.title}</article>
}

A app/not-found.tsx globális 404-es arc; szegmens szinten is definiálhatsz sajátot.

redirect() és permanentRedirect()

Űrlap, auth vagy régi URL cseréje után szerveren irányítasz:

import { redirect, permanentRedirect } from 'next/navigation'

export async function saveProfile(formData: FormData) {
  'use server'
  await updateProfile(formData)
  redirect('/profile')
}

A permanentRedirect 308-at ad (SEO: tartós költözés). Ne hívj redirect-et try/catch közben úgy, hogy elkapod a hibaként – lásd lent: unstable_rethrow.

error.tsx – szegmens hiba

Az error.tsx Client Component kell legyen; reset() újrapróbálja a szegmens renderelését. Részletek a Best practice-ek és Gyakori hibák fejezetekben is.

global-error.tsx

A root layout saját hibáit az error.tsx nem mindig fedi le. A app/global-error.tsx a teljes fa hibájára – kötelező benne saját <html> és <body>:

'use client'

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html lang="hu">
      <body>
        <h1>Komoly hiba történt</h1>
        <button type="button" onClick={() => reset()}>
          Újra
        </button>
      </body>
    </html>
  )
}

forbidden() és unauthorized()

Auth modellnél előfordulhat, hogy nem 404-et, hanem jogosultság vagy azonosítás hiányát akarod jelezni. A Next biztosít forbidden() és unauthorized() segédfüggvényeket (verziótól függően párosulnak forbidden.tsx / unauthorized.tsx fájlokkal) – a pontos API-t mindig a projekted Next verziójának dokumentációjához igazítsd.

Catch blokk és redirect / notFound

A redirect és notFound speciális „dobott” vezérlést használ. Ha try/catch-ben elkapod őket, rossz viselkedés lehet. Ilyenkor unstable_rethrow (vagy a dokumentációban javasolt aktuális API) újradobja a vezérlési hibát:

import { unstable_rethrow } from 'next/navigation'

export async function action() {
  try {
    await riskyWork()
    redirect('/ok')
  } catch (err) {
    unstable_rethrow(err)
    console.error(err)
  }
}

A pontos import és név verziófüggő – build előtt ellenőrizd a típusokat.

📝 Összefoglaló – 17. fejezet

notFound() + not-found.tsx: „nincs ilyen tartalom”, nem feltétlenül HTTP szintű 404 minden esetben ugyanúgy
redirect / permanentRedirect: szerver oldali navigáció mutáció után
global-error.tsx: root szintű végső védőháló
Auth hibák: forbidden / unauthorized minták a dokumentáció szerint
try/catch: redirect/notFound esetén unstable_rethrow (vagy aktuális megfelelő)

Hibakezelés mélyebben

On this page