← blog.backToBlog
Technique14 blog.readTime7 avril 2026
Migration de Vite à Next.js : Retour d'expérience et guide technique
Nous avons migré notre portfolio de Vite/React SPA vers Next.js App Router. Voici le guide complet : pourquoi, comment, et les pièges à éviter.
AJ
blog.author
Jaddaoui Elevate
Pourquoi migrer de Vite à Next.js ?
Vite est un outil de build fantastique pour le développement. Rapide, élégant, efficace. Mais pour un site de production orienté SEO, il a un problème fondamental : le Client-Side Rendering (CSR).
Le problème CSR et le SEO
Quand Googlebot visite un site Vite, il voit :
``html
`
Puis il doit exécuter JavaScript pour voir le contenu. Bien que Google le fasse, c'est plus lent à indexer et les performances SEO sont systématiquement inférieures aux pages rendues côté serveur.
Notre architecture avant (Vite)
`
src/
App.jsx
main.jsx
components/
context/
i18n/
index.html
vite.config.js
`
L'architecture après (Next.js App Router)
`
src/
app/
[locale]/
layout.tsx ← HTML/body, providers
page.tsx ← Homepage SSG
about/
page.tsx
blog/
page.tsx
[slug]/
page.tsx
[landing]/
page.tsx
components/ ← Mêmes composants + "use client"
context/ ← Mêmes contextes + "use client"
i18n/
routing.ts
request.ts
messages/
fr.json
ar.json
middleware.ts
lib/
blog.ts
`
Les étapes de migration
Étape 1 : Mise à jour du package.json
`json
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "15.1.0",
"next-intl": "^3.26.0"
}
}
`
Étape 2 : Ajouter "use client" aux composants existants
Tous les composants utilisant des hooks React ou Framer Motion doivent être marqués :
`jsx
'use client';
import { motion } from 'framer-motion';
// ... reste du composant inchangé
`
Étape 3 : Créer le middleware next-intl
`typescript
// src/middleware.ts
import createMiddleware from 'next-intl/middleware';
import { routing } from './i18n/routing';
export default createMiddleware(routing);
export const config = {
matcher: ['/((?!_next|_vercel|.\..).*)'],
};
`
Étape 4 : Layout avec providers
`tsx
// src/app/[locale]/layout.tsx
export default async function LocaleLayout({ children, params }) {
const { locale } = await params;
const messages = await getMessages();
return (
{children}
);
}
`
Les pièges courants
Piège 1 : localStorage côté serveur
`typescript
// ❌ Crash côté serveur
const theme = localStorage.getItem('theme');
// ✅ Vérifier l'environnement
const theme = typeof window !== 'undefined' ? localStorage.getItem('theme') : null;
`
Piège 2 : Les imports d'images
Dans Vite : import img from './image.png' → URL
Dans Next.js : même chose, mais utiliser next/image pour l'optimisation.
Piège 3 : Les routes dynamiques
`tsx
// Déclarer generateStaticParams() pour SSG
export function generateStaticParams() {
return [{ locale: 'fr' }, { locale: 'ar' }];
}
``
Gains observés après migration
Conclusion
La migration de Vite à Next.js est un investissement qui paie rapidement en termes de SEO et de performance. Pour un site professionnel orienté croissance, c'est la décision technique la plus importante que vous puissiez prendre.
#Next.js#Vite#migration#SEO#SSR#performance