REDIRECTIONS 301 CONFIGURATION
Prérequis
- Projet Next.js avec accès à next.config.ts ou middleware.ts
- Liste des anciennes et nouvelles URLs validée par l’équipe SEO
- Environnement local Next.js (`next dev`) pour tester les règles
- Outil de test HTTP : curl -I, onglet Réseau du navigateur ou équivalent
Après une refonte ou un changement d’URL, les redirections 301 préservent le référencement et évitent les 404. Sur Next.js, deux leviers couvrent la majorité des cas : `redirects` dans la configuration et le middleware pour les règles dynamiques. Vous allez cadrer la table de correspondance, implémenter les règles et valider l’absence de boucles avant mise en production.
Cadrer la table de correspondance URLs
Avant d’écrire une ligne de code, validez avec le SEO lead une table source → destination : chemins relatifs, statut permanent ou temporaire, date de mise en prod.
Repérez les cas sensibles : pagination, trailing slash, URLs avec paramètres UTM, landing campagnes et fichiers PDF hébergés.
Versionnez la table en CSV ou dans Notion. Chaque redirection a un owner et une date de revue pour les futures refontes.
Redirections statiques via next.config
Dans next.config.ts, la clé `redirects` retourne un tableau de règles `{ source, destination, permanent: true }`.
Utilisez des chemins relatifs (`/ancienne-page` → `/nouvelle-page`). `permanent: true` émet un code 301.
Testez en local avec `next dev` puis vérifiez le code HTTP en production (curl -I ou les outils réseau du navigateur).
Middleware pour règles conditionnelles
Le fichier middleware.ts s’exécute en edge avant le rendu. Utile pour rediriger selon le hostname, la locale ou un préfixe de chemin.
Retournez `NextResponse.redirect(url, 301)` pour une redirection permanente.
Limitez le matcher du middleware aux chemins concernés pour préserver les performances.
Erreurs fréquentes
Boucle A → B → A : vérifiez que la destination ne renvoie pas vers la source.
Redirection HTTP vers HTTPS oubliée : configurez-la au niveau hébergeur (Vercel) en complément.
Oublier les trailing slashes : alignez la politique (`trailingSlash`) sur les règles de redirection.
Chaînes A → B → C au lieu d’un saut direct A → C : ralentit crawl et utilisateurs.
Ce qu’il faut retenir
Table de correspondance validée avant implémentation.
next.config `redirects` pour les mappings fixes ; middleware pour la logique dynamique.
Toujours tester l’absence de boucles et le code 301 en production.
Documentez la table pour les futures refontes.
FAQ
301 pour un changement définitif d’URL. 302 uniquement pour des redirections temporaires (campagne, maintenance courte).
Jusqu’à quelques centaines dans next.config reste lisible. Au-delà, envisagez un fichier JSON versionné ou une couche edge (CDN) pour centraliser.
En local avec `next dev`, puis curl -I sur chaque URL source en preview et en production. Vérifiez code 301, destination finale et absence de boucle.