not-found.js

Bulunamayan dosya, aşağıdaki durumlarda kullanıcı arayüzünü oluşturmak için kullanılır notFound işlevi bir rota segmenti içinde atılır. Next.js, özel bir kullanıcı arayüzü sunmanın yanı sıra, akışlı yanıtlar için 200 HTTP durum kodunu ve akışsız yanıtlar için 404 adresini döndürür.

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

Bilmekte fayda var: Kök app/not-found.js dosyası, beklenen notFound() hatalarını yakalamanın yanı sıra tüm uygulamanız için eşleşmeyen URL'leri de ele alır. Bu, uygulamanız tarafından işlenmeyen bir URL'yi ziyaret eden kullanıcılara app/not-found.js dosyası tarafından dışa aktarılan kullanıcı arayüzünün gösterileceği anlamına gelir.

Props

not-found.js bileşenler herhangi bir destek kabul etmez.

Data Fetching

Varsayılan olarak, not-found bir Sunucu Bileşenidir. Verileri almak ve görüntülemek için async olarak işaretleyebilirsiniz:

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

Yola dayalı içerik görüntülemek için usePathname gibi İstemci Bileşeni kancalarını kullanmanız gerekiyorsa, bunun yerine istemci tarafında veri getirmeniz gerekir.

Version History