Une config prête pour Vite, Next.js ou Astro en 30 secondes
Vous démarrez un nouveau projet. Vous savez que vous voulez TypeScript, Tailwind, l'alias @/* , peut-être un proxy dev vers votre backend, peut-être une sortie standalone pour Docker. La doc "officielle" disperse tout ça sur six pages, et les snippets supposent toujours un autre snippet que vous n'avez pas lu. Vous finissez donc par copier la moitié d'une config d'un tuto, l'autre moitié d'un autre, et passez l'heure suivante à déboguer pourquoi rien ne marche.
Ce builder vous donne le seul fichier de config dont vous avez vraiment besoin : pré-câblé, commenté, prêt à copier-coller. Choisissez le framework (Vite, Next.js ou Astro), activez les interrupteurs pour les fonctionnalités voulues, et la config générée se met à jour en direct à droite. Copiez-la à la racine de votre projet, lancez npm install pour les plugins listés, et vous êtes prêt à coder.
Aucun fichier n'est jamais envoyé nulle part. Tout tourne dans votre navigateur, y compris la génération de code. La sortie est une config propre, moderne, qui correspond à ce que les équipes des frameworks elles-mêmes recommandent en 2025.
Comment l'utiliser
- Choisissez un framework en haut : Vite pour une SPA rapide, Next.js pour une app React full-stack, Astro pour un site statique riche en contenu.
- Activez les options à gauche. Chaque interrupteur change la config générée à droite en temps réel, y compris les commentaires inline pour que vous compreniez ce que fait chaque section.
- Pour Vite, choisissez une saveur (React, Vue, Svelte, SolidJS, Vanilla). Pour Next, choisissez un router (App ou Pages) et un mode de sortie (défaut, standalone, export statique). Pour Astro, choisissez les intégrations voulues (React, Vue, Svelte).
- Besoin d'un proxy dev pour Vite ? Activez l'interrupteur Proxy et tapez le chemin et la cible. Besoin de mettre des domaines d'images en liste blanche dans Next ? Tapez un hostname par ligne dans la textarea.
- Quand l'aperçu vous va, cliquez sur Copy en haut du panneau d'aperçu et collez comme vite.config.ts / next.config.ts / astro.config.mjs à la racine de votre projet.
- Installez les plugins que la config importe (les noms sont dans les lignes `import` en haut). La plupart sont des paquets officiels style `@vitejs/plugin-react`, `@astrojs/react` ou `next-intl`.
- Vous pouvez aussi cliquer sur Reset pour revenir à un défaut sensé pour le framework actif, utile quand vous expérimentez.
Quand c'est utile
Six moments courants où le builder fait gagner de vraies minutes :
- Démarrer un nouveau projet de zéro. Vous avez lancé `npm create vite@latest` et voulez ajouter Tailwind, un alias et un proxy sans lire trois articles de blog différents. Choisissez Vite, activez les interrupteurs, collez par-dessus la config générée. Fait en 30 secondes.
- Migrer de Pages Router à App Router. Next.js 16 livre App Router par défaut. Le builder affiche la config moderne avec App Router, next-intl, typedRoutes et sortie standalone tous configurés comme l'équipe Next recommande en 2025. Copiez et adaptez.
- Configurer Docker pour une app Next.js. Il vous faut output: 'standalone' pour que l'image Docker soit petite, mais vous voulez aussi typedRoutes et les domaines d'images. Le builder écrit tout dans un seul bloc au lieu que vous deviniez les noms de champs.
- Passer de create-react-app à Vite. CRA n'est plus maintenu. Le builder vous donne une config Vite + React + TS + Tailwind + @/* qui s'installe proprement, pas d'enfer de config Webpack, pas de contournements `craco`.
- Ajouter un proxy d'API dev. Votre frontend est sur localhost:5173, votre backend Go/Python/Rust est sur localhost:8080. Il vous faut /api pour transférer au backend avec le bon contournement CORS. Le builder écrit le bloc proxy exactement bien, y compris `changeOrigin` et `secure: false`.
- Démarrer un site de contenu avec Astro. Vous voulez sortie statique, îles React pour les bits interactifs, Tailwind et un setup de routage i18n. La doc Astro a tout ça, mais éparpillé sur cinq guides. Le builder le condense en un fichier.