Retour au blog
Comment j’ai résolu une erreur 404 sur Vercel avec un site React.js

Comment j’ai résolu une erreur 404 sur Vercel avec un site React.js

14 mai 2025
development

🚨 Problème rencontré

En développant un site vitrine React.js pour un client, avec intégration du module Planity en marque blanche (sans redirection vers planity.com), tout fonctionnait parfaitement en navigation.

Mais dès que j’actualisais une page comme /reserver ou /contact, Vercel renvoyait une erreur 404: NOT_FOUND.

🧠 Pourquoi ce bug ?

Le projet est une Single Page Application (SPA) : toutes les routes sont gérées côté client via React Router.
Mais Vercel, par défaut, ne connaît pas les routes /reserver, /contact, etc. – il cherche un fichier statique… qu’il ne trouve pas.

Résultat ➤ erreur 404, même si la page fonctionne très bien quand on y accède via les liens internes.

✅ La solution : vercel.json

Pour corriger ça, j’ai ajouté un fichier à la racine du projet :

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

Cela permet à Vercel de rediriger toutes les requêtes vers /, et de laisser React gérer les routes côté client.

🎯 Conclusion Si tu utilises React + Vercel + React Router, et encore plus si tu intègres des services comme Planity ou Stripe, prévois une gestion côté serveur des routes SPA. Ça t’évitera des erreurs critiques lors des refreshs ou accès directs.

👉 Tu veux un accompagnement personnalisé pour ton site React ou ton projet web ? Contacte-moi ici

Galerie