"// TODO: Refactor this later" - Moi en 2020, mentant effrontément à mon moi futur.
Chapitre 1 : L'archéologie du code
Ce que j'ai trouvé (2020)
// app.js
function fetchData() {
// Désolé pour ça...
fetch('/api').then(r => r.json()).then(data => {
// Magic numbers everywhere
if (data.length > 42) {
this.setState({ thing: data.slice(0, 42) })
} else {
this.setState({ thing: data })
}
})
}Commentaire original : "Works for now ¯\_(ツ)_/¯"
Ce que j'ai écrit (2025)
// app/page.tsx
async function DataList() {
const data = await getData({
limit: DEFAULT_PAGINATION,
cache: 'force-cache'
})
return !data?.length ? (
Nouveau commentaire : "Merci Next.js et TypeScript"
« Refactorer du vieux code, c'est comme retrouver son journal intime de lycée :
à la fois touchant et horriblement gênant. »
Chapitre 2 : Les 3 erreurs qui m'ont coûté cher
1. Le "state management maison"
J'avais inventé un système de state global avec... des EventListeners window. Résultat :
- 48h à debugguer des memory leaks
- Migration vers Zustand en 1 jour avec Next.js
2. Les CSS dans le JavaScript
// 2020 : Le cauchemar
<div style={{
margin: '5px',
padding: '10px 5px 10px 5px',
backgroundColor: mode === 'dark' ? '#333' : '#fff'
}}>Aujourd'hui : className="p-2 my-1 dark:bg-gray-800 bg-white" avec Tailwind et Next.js
Chapitre 3 : Dialogue avec mon ancien moi
Moi 2025 : « Pourquoi t'as mis toute la logique dans des useEffect ? »
Moi 2020 : « Euh... YouTube disait que c'était bien ? »
Moi 2025 : *soupir* « Au moins t'avais commenté ton code... »
Ce que cette migration m'a appris
- La dette technique est un miroir : Elle montre comment tu as grandi
- Next.js est indulgent : J'ai pu garder 70% des composants
- ViteToNext.AI a sauvé mon moral : 8h de travail vs 3 semaines estimées
Ne refais pas mes erreurs
Notre outil analyse ton code et te montre les patterns à risque avant migration.
Essayer