Custom Errors

404 Page

Bir 404 sayfasına çok sık erişilebilir. Her ziyaret için bir hata sayfasının sunucu tarafından oluşturulması Next.js sunucusunun yükünü artırır. Bu da maliyetlerin artmasına ve deneyimlerin yavaşlamasına neden olabilir.

Yukarıdaki tuzaklardan kaçınmak için Next.js, herhangi bir ek dosya eklemek zorunda kalmadan varsayılan olarak statik bir 404 sayfası sağlar.

Customizing The 404 Page

Özel bir 404 sayfası oluşturmak için bir pages/404.js dosyası oluşturabilirsiniz. Bu dosya derleme sırasında statik olarak oluşturulur.

pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

Bildiğim iyi oldu: Kullanabilirsiniz getStaticProps derleme zamanında veri getirmeniz gerekiyorsa bu sayfanın içinde.

500 Page

Her ziyaret için sunucunun bir hata sayfası oluşturması, hatalara yanıt vermeyi karmaşık hale getirir. Kullanıcıların hatalara mümkün olduğunca hızlı yanıt almasına yardımcı olmak için Next.js, herhangi bir ek dosya eklemek zorunda kalmadan varsayılan olarak statik bir 500 sayfası sağlar.

Customizing The 500 Page

500 sayfasını özelleştirmek için bir pages/500.js dosyası oluşturabilirsiniz. Bu dosya derleme sırasında statik olarak oluşturulur.

pages/500.js
export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>
}

Bildiğim iyi oldu: Kullanabilirsiniz getStaticProps derleme zamanında veri getirmeniz gerekiyorsa bu sayfanın içinde.

More Advanced Error Page Customizing

500 hataları hem istemci tarafında hem de sunucu tarafında Error bileşeni tarafından işlenir. Bunu geçersiz kılmak isterseniz, pages/_error.js dosyasını tanımlayın ve aşağıdaki kodu ekleyin:

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `An error ${statusCode} occurred on server`
        : 'An error occurred on client'}
    </p>
  )
}
 
Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}
 
export default Error

pages/_error.js yalnızca üretimde kullanılır. Geliştirme aşamasında, hatanın nereden kaynaklandığını bilmek için çağrı yığınıyla birlikte bir hata alırsınız.

Reusing the built-in error page

Yerleşik hata sayfasını oluşturmak istiyorsanız Error bileşenini içe aktarabilirsiniz:

import Error from 'next/error'
 
export async function getServerSideProps() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const errorCode = res.ok ? false : res.status
  const json = await res.json()
 
  return {
    props: { errorCode, stars: json.stargazers_count },
  }
}
 
export default function Page({ errorCode, stars }) {
  if (errorCode) {
    return <Error statusCode={errorCode} />
  }
 
  return <div>Next stars: {stars}</div>
}

Error bileşeni, statusCode ile birlikte bir metin mesajı iletmek isterseniz title öğesini de bir özellik olarak alır.

Özel bir Error bileşeniniz varsa, bunun yerine bu bileşeni içe aktardığınızdan emin olun. next/error, Next.js tarafından kullanılan varsayılan bileşeni dışa aktarır.

Caveats