Erreurs personnalisées

Page 404

Une page 404 peut être consultée très fréquemment. Le rendu côté serveur (SSR) d'une page d'erreur pour chaque visite augmente la charge du serveur Next.js. Cela peut entraîner des coûts supplémentaires et une expérience utilisateur ralentie.

Pour éviter ces écueils, Next.js fournit par défaut une page 404 statique sans avoir besoin d'ajouter des fichiers supplémentaires.

Personnalisation de la page 404

Pour créer une page 404 personnalisée, vous pouvez créer un fichier pages/404.js. Ce fichier est généré statiquement lors de la construction.

export default function Custom404() {
  return <h1>404 - Page non trouvée</h1>
}

Bon à savoir : Vous pouvez utiliser getStaticProps dans cette page si vous avez besoin de récupérer des données lors de la construction.

Page 500

Le rendu côté serveur (SSR) d'une page d'erreur pour chaque visite ajoute de la complexité à la gestion des erreurs. Pour aider les utilisateurs à obtenir des réponses aux erreurs aussi rapidement que possible, Next.js fournit par défaut une page 500 statique sans avoir besoin d'ajouter des fichiers supplémentaires.

Personnalisation de la page 500

Pour personnaliser la page 500, vous pouvez créer un fichier pages/500.js. Ce fichier est généré statiquement lors de la construction.

export default function Custom500() {
  return <h1>500 - Une erreur côté serveur est survenue</h1>
}

Bon à savoir : Vous pouvez utiliser getStaticProps dans cette page si vous avez besoin de récupérer des données lors de la construction.

Personnalisation avancée des pages d'erreur

Les erreurs 500 sont gérées à la fois côté client et côté serveur par le composant Error. Si vous souhaitez le remplacer, définissez le fichier pages/_error.js et ajoutez le code suivant :

function Error({ statusCode }) {
  return (
    <p>
      {statusCode
        ? `Une erreur ${statusCode} est survenue côté serveur`
        : 'Une erreur est survenue côté client'}
    </p>
  )
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : 404
  return { statusCode }
}

export default Error

pages/_error.js est uniquement utilisé en production. En développement, vous obtiendrez une erreur avec la pile d'appels pour connaître l'origine de l'erreur.

Réutiliser la page d'erreur intégrée

Si vous souhaitez afficher la page d'erreur intégrée, vous pouvez importer le composant Error :

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>Étoiles Next : {stars}</div>
}

Le composant Error accepte également une propriété title si vous souhaitez passer un message texte avec un statusCode.

Si vous avez un composant Error personnalisé, assurez-vous d'importer celui-ci à la place. next/error exporte le composant par défaut utilisé par Next.js.

Mises en garde

• Error ne prend pas actuellement en charge les méthodes de récupération de données (Data Fetching) de Next.js comme getStaticProps ou getServerSideProps.
• _error, comme _app, est un nom de chemin réservé. _error est utilisé pour définir les mises en page et comportements personnalisés des pages d'erreur. /_error affichera une 404 lorsqu'il est accédé directement via le routage ou le rendu dans un serveur personnalisé.