Comment créer une page d'erreur 404 personnalisée pour NextJS ?

Lorsque nous développons des sites web avec NextJS, il est primordial de penser à offrir une expérience agréable à nos utilisateurs quand ces derniers croisent une erreur 404.

Plutôt que d'afficher une page générique, proposée par défaut par NextJS, essayons de créer une page 404 personnalisée afin de maintenir l'engagement de nos utilisateurs.

Pourquoi personnaliser une page 404 ?

Comme nous l'avons vu, nous rencontrons généralement une erreur 404 quand une URL invalide ou incorrecte a été demandée.

Voici le type d'erreur 404 que vous pouvez rencontrer sur Believemy :

Une page 404 bien pensée permet:

• de garder les utilisateurs sur notre site internet en les redirigeant sur des contenus pertinents ;
• d'ajouter une touche d'humour pour marquer l'univers de l'entreprise ;
• d'améliorer l'expérience utilisateur.

Étape 1 : Créer une page not-found

Dans NextJS, nous pouvons créer une page d'erreur 404 très facilement : il suffit de nous rendre dans notre dossier app et de créer un fichier not-found.jsx (ou not-found.tsx si vous souhaitez utiliser Typescript).

Voici un exemple pour app/not-found.jsx :

// app/not-found.jsx
import Link from 'next/link';

const Custom404 = () => {
  return (
    <div>
      <h1>404. Page non trouvée</h1>
      <p>
        Il semble que la page que vous recherchez n'existe pas. Retournez à l'accueil ou explorez d'autres sections.
      </p>
      <Link href="/" >
        Retour à l'accueil
      </Link>
    </div>
  );
};

export default Custom404;

Nous avons désormais notre page d'erreur prête à l'usage ! Cherchez une adresse url invalide sur votre site : vous devriez pouvoir voir votre nouvelle page d'erreur 404 personnalisée.

Étape 2 : Créer plusieurs pages d'erreur 404

Il est également intéressant de créer plusieurs pages d'erreur 404 différentes avec le routeur app de NextJS.

L'idée est de proposer des expériences différentes selon la section du site sur lequel nous nous trouvons.

L'avantage, c'est que c'est simple et rapide grâce au routeur app. Il est en effet possible d'avoir plusieurs pages not-found dans le même projet ! Par exemple :

• app/not-found.jsx - Sera une page d'erreur 404 pour toutes les erreurs 404 rencontrées dans notre site
• app/articles/not-found.jsx - Sera une page d'erreur 404 pour toutes les erreurs 404 rencontrées spécifiquement dans les urls articles.
• app/profiles/not-found.jsx - Sera une page d'erreur 404 pour toutes les erreurs 404 rencontrées spécifiquement dans les urls profiles.

Bref, vous avez saisi !

Conclusion

Créer une page d'erreur 404 personnalisée avec Next.js est une étape importante pour offrir une expérience utilisateur cohérente et attrayante : bien conçue, cette page peut non seulement minimiser la frustration des utilisateurs, mais aussi renforcer l'image de votre site.

En bref :

1. Créez un fichier not-found.jsx dans le dossier app
2. Ajoutez des liens ainsi que des animations
3. Pensez à créer des pages 404 dédiées à certaines parties de votre site

Et pour aller encore plus loin, pensez à regarder notre formation complète sur NextJS. ✨