Checklist pré-migration essentielle

Une migration réussie commence par une préparation minutieuse. Suivez ce guide étape par étape pour optimiser vos chances de succès.

1. Audit de votre codebase actuelle

Structure des fichiers

• Inventorier tous les composants React
• Identifier les routes dynamiques
• Lister les API endpoints
• Cataloguer les assets statiques

Dépendances à vérifier

• React Router → App Router (migration automatique)
• Vite plugins → Next.js équivalents
• CSS modules → Support natif Next.js
• Environment variables → Adaptation .env.local

2. Restructuration des routes

Next.js utilise un système de routage basé sur les fichiers :

Avant (React Router)

                            src/
                            components/
                                Home.jsx
                                About.jsx
                                Contact.jsx
                            App.jsx (avec <Routes>)
                                                

Après (Next.js App Router)

                            app/
                            page.tsx          // Route racine
                            about/
                                page.tsx        // Route /about
                            contact/
                                page.tsx        // Route /contact
                                                

3. Optimisation des composants

Client vs Server Components

• Server Components : Par défaut, pour le contenu statique
• Client Components : Avec "use client" pour l'interactivité

Hooks à adapter

• useNavigate() → useRouter()
• useLocation() → usePathname()
• useParams() → Props params directes

4. Configuration des assets

Images

• Migrer vers le composant next/image
• Configurer les domaines externes si nécessaire
• Optimiser les formats (WebP, AVIF)

Fonts

• Utiliser next/font pour l'optimisation automatique
• Éliminer les chargements externes non nécessaires

5. Variables d'environnement

Next.js utilise un système de variables spécifique :

• NEXT_PUBLIC_ pour les variables côté client
• Variables serveur sans préfixe
• Fichiers .env.local, .env.development, .env.production

6. Tests de compatibilité

Outils recommandés

• ESLint : Configuration Next.js
• TypeScript : Strict mode recommandé
• Jest : Tests unitaires adaptés