Nextjs Tutorial — ErrorPage ( 404 )

Nextjs v14 ile birlikte sayfa bulunamadı ( 404 ) durumlarını daha etkili bir şekilde yönetmemize imkan sunulmuştur. Bu yazımızda Nextjs’in özelliğini ve bu özelliğini basit nasıl kullanılacağı hakkında bilgi vermeye çalışacağım.

Not Found ( 404 ) Sayfaları

Bir web uygulamasında, kullanıcılar bazı zamanlar mevcut olmayan bir sayfaya erişmeye çalışabilirler. Bu durumlarda kullanıcı bir “404 Not Found” sayfası göstermemiz gerekebilir. İyi bir kullanıcı deneyimi için önem taşımaktadır. Nextjs v14 ile bearber bu durumları daha esnek bir şekilde yönetmemize imkan tanımaktadır.

Özellikler ve Kullanımı

Nextjs, Statik ve sunucu tarafında oluşturulan ( SSR ) sayfalar için özel 404 sayfası oluşturmamıze imkan tanır. Anca v14 ile beraber 404 hatalarını dinamik olarak ele almamıze ve kullanıcın karşılaştığı duruma göre özel yanıtlar oluşturmamıza imkan tanıyan yeni yöntemler sunulmuştur.

getServerSideProps ile 404 Hatalarını Ele Alma

“getServerSideProps” fonksiyonu bir sayfanın sunucu tarafında oluşturulmadan önce çalışır ve sayfa verilerini önceden yüklememize imkan tanır. Nextjs v14 ile beraber bu fonksiyon içerisinde hata tespit edildiğidne doğrudan bir 404 sayfasını göstermemize olanak tanır.

export async function getServerSideProps(context) {
  const { params } = context;
  const data = await fetchData(params.id); // Örnek bir API çağrısı

  if (!data) {
    // Veri bulunamazsa, NotFound hatası döndür
    return {
      notFound: true,
    };
  }

  // Veri varsa, sayfaya props olarak geçir
  return {
    props: { data },
  };
}

Bu kod, eğer “fetchData” fonksiyonu bir sonuç döndürmezse, kullanıcıya otomatik olarak 404 sayfası gösterilmesini sağlar.

Custom 404 Sayfası Oluşturma

Nextjs v14'te özel 404 sayfa oluşturmak için “pages” klasörü içerisine “404.js” adında bir dosya oluşturmamız yeterli olacaktır. Bu dosya, kullanıcılara gösterilecek Custom 404 sayfası olarak tanımlanır.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Sayfa Bulunamadı</h1>;
}

Bu basitçe oluşturulmuş bileşen, bulunamayan sayfalar için özel bir mesaj gösterir. Tabii ki, bu sayfayı daha etkileşimli ve yardımcı olacak şekilde genişletebilirsiniz.