Le guide ultime du Front-end Moderne (2026)

HTML, CSS, JavaScript, React, Vue, Next.js, Tailwind — tout ce qu'il faut maîtriser pour construire des interfaces web modernes.

Chapitres

50+

Exemples de code

2026

Mis à jour

📑 Sommaire

1. L'écosystème front-end en 2026
7. Vue.js & alternatives
2. HTML sémantique moderne
8. Next.js & meta-frameworks
3. CSS moderne : Flexbox, Grid & plus
9. Tailwind CSS & styling moderne
4. JavaScript ES2024+ essentiel
10. Performance & Core Web Vitals
5. TypeScript pour le front-end
11. Outils : Vite, ESLint, Testing
6. React en 2026
12. Roadmap & architecture front-end

📚 Nos cours détaillés (plongez dans chaque technologie)

🏠 Hub Programmation
🎨 HTML & CSS
⚡ JavaScript
🔷 TypeScript
⚛️ React
💚 Vue.js
▲ Next.js
🌊 Tailwind CSS
🟢 Node.js

CHAPITRE 01

L'écosystème front-end en 2026

🌍 Vue d'ensemble

Le front-end, c'est tout ce que l'utilisateur voit et avec quoi il interagit dans un navigateur. En 2026, l'écosystème s'articule autour de trois piliers fondamentaux (HTML, CSS, JavaScript) et d'une couche de frameworks et d'outils qui accélèrent le développement.

La règle d'or : HTML = structure, CSS = présentation, JavaScript = comportement. Tout le reste (React, Vue, Tailwind, Next.js…) sont des abstractions construites au-dessus de ces trois langages. Maîtrisez les fondamentaux d'abord.

📊 Le paysage technologique

Catégorie	Technologies dominantes	Tendance 2026
Structure	HTML5 sémantique	Attributs popover, ,
Style	CSS natif, Tailwind, CSS Modules	Container Queries, :has(), Cascade Layers
Langage	JavaScript / TypeScript	TypeScript quasi-standard, TC39 actif
UI Frameworks	React, Vue, Svelte, Solid	React Server Components, Signals partout
Meta-frameworks	Next.js, Nuxt, SvelteKit, Astro	Rendu hybride (SSR + SSG + streaming)
Styling	Tailwind CSS, CSS-in-JS, vanilla	Tailwind v4 (engine Rust), CSS natif en hausse
Build tools	Vite, Turbopack, esbuild	Vite dominant, Webpack en déclin
Testing	Vitest, Playwright, Testing Library	Vitest remplace Jest

🗺️ La stack front-end moderne type

// Stack front-end « standard » en 2026

Pas de « bonne » stack universelle. Un portfolio personnel n'a pas besoin de Next.js. Un blog statique peut se contenter d'Astro + Markdown. Choisissez en fonction du besoin réel, pas de la hype.

🧠 Quiz

Quels sont les trois piliers fondamentaux du front-end ?

HTML (structure), CSS (présentation) et JavaScript (comportement). Tout framework ou outil front-end est construit au-dessus de ces trois langages.

Quelle est la différence entre un framework UI et un meta-framework ?

Un framework UI (React, Vue, Svelte) gère les composants et le rendu dans le navigateur. Un meta-framework (Next.js, Nuxt, SvelteKit) ajoute le routing, le SSR/SSG, les API routes et l'infrastructure de déploiement autour du framework UI.

CHAPITRE 02

HTML sémantique moderne

🏗️ Les balises sémantiques essentielles

 class=« header »>…

class=« nav »>…

class=« content »>…

class=« footer »>…

…

Titre de l'article

…

Pourquoi le sémantique est crucial : meilleur SEO (Google comprend la structure), meilleure accessibilité (lecteurs d'écran), et code plus lisible pour les développeurs.

🆕 Nouvelles balises et attributs HTML (2024-2026)

 id=« modal »>

Confirmer

Voulez-vous continuer ?

onclick=« this.closest('dialog').close() »>Fermer

onclick=« document.getElementById('modal').showModal() »>Ouvrir

popovertarget=« info »>Aide
id=« info » popover>Contenu du popover

action=« /search »>
type=« search » name=« q » placeholder=« Rechercher… »>

src=« photo.webp » loading=« lazy » alt=« Description »>
src=« video.html » loading=« lazy »>

📋 Checklist accessibilité HTML

Règle	Bon exemple	Erreur fréquente
Alt sur les images	alt= »Logo entreprise »	Oublier alt ou mettre alt= » »
Labels sur les inputs		Placeholder seul sans label
Hiérarchie des titres	h1 → h2 → h3 (dans l'ordre)	Sauter de h1 à h4
Boutons vs liens	Lien = navigation, bouton = action	qui ne mène nulle part
Rôles ARIA	Seulement si pas de balise native	Abuser de role= »button » sur des
Langue de la page		Pas de lang défini

Règle #1 de l'accessibilité : utilisez les balises HTML natives. Un est accessible par défaut (clavier, lecteur d'écran). Un

ne l'est pas.

🧠 Quiz

Quelle est la différence entre

est un contenu autonome et redistribuable (article de blog, commentaire, produit).

est un regroupement thématique à l'intérieur d'un contenu plus large. Un article peut contenir des sections, mais une section n'est pas forcément un article.

Quel attribut HTML permet d'afficher un tooltip/dropdown sans JavaScript ?

L'attribut popover. On crée un élément avec popover et on le lie à un bouton avec popovertarget= »id ». Le navigateur gère l'ouverture/fermeture nativement.

CHAPITRE 03

CSS moderne : Flexbox, Grid & plus

📐 Flexbox — Layout 1D

/* Flexbox = disposition sur UN axe (horizontal ou vertical) */
.navbar /* Centrer parfaitement un élément */
.center

/* Propriétés des enfants */
.item

👉 Voir notre cours complet HTML & CSS pour les fondamentaux en détail.

🔲 CSS Grid — Layout 2D

/* Grid = disposition sur DEUX axes (lignes ET colonnes) */
.page-layout /* Grille responsive SANS media queries */
.cards-grid

/* Placement explicite */
.header
.sidebar

🆕 CSS 2024-2026 : les nouveautés majeures

/* Container Queries — responsive basé sur le PARENT */
.card-container
@container card (min-width: 400px)
}/* :has() — Le sélecteur parent (enfin !) */
.form-group:has(input:invalid)

/* Cascade Layers — contrôler la priorité CSS */
@layer reset, base, components, utilities;

/* Nesting natif — comme Sass, mais sans préprocesseur */
.card
&:hover
}

Container Queries changent tout. Avant, un composant devait savoir dans quel viewport il serait affiché. Maintenant, il s'adapte à son conteneur. C'est la vraie modularité CSS.

⚡ Flexbox vs Grid — quand utiliser quoi ?

Critère	Flexbox	Grid
Dimension	1D (ligne OU colonne)	2D (lignes ET colonnes)
Cas d'usage	Navbar, boutons, alignements	Layouts de page, galleries, dashboards
Contenu vs Layout	Le contenu dicte la taille	Le layout dicte la taille
Responsive	flex-wrap	auto-fit / auto-fill

En pratique, on utilise les deux ensemble. Grid pour le layout global, Flexbox pour l'alignement à l'intérieur des composants.

🧠 Quiz

Comment créer une grille responsive sans media queries en CSS Grid ?

Avec grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). Les colonnes se créent automatiquement tant qu'il y a au moins 280px d'espace.

Qu'est-ce que le sélecteur :has() permet de faire ?

:has() est le premier sélecteur parent en CSS. Il permet de styliser un élément en fonction de ses enfants. Par exemple, .card:has(img) ne cible que les cartes contenant une image.

CHAPITRE 04

JavaScript ES2024+ essentiel

⚡ Les fondamentaux indispensables pour le front-end

// Destructuring — extraire des valeurs
const = userData;
const [first, …rest] = items;// Optional chaining & nullish coalescing
const city = user?.address?.city ?? « Inconnue »;

// Template literals
const html = `

Bonjour $

// Spread / Rest
const newUser = ;
const merged = […arr1, …arr2];

// Array methods essentiels
const names = users.map(u => u.name);
const adults = users.filter(u => u.age >= 18);
const total = prices.reduce((sum, p) => sum + p, 0);
const found = users.find(u => u.id === 42);

👉 Voir notre cours JavaScript complet (12 chapitres)

🔄 Async/Await — le modèle asynchrone

// Fetch API — requêtes réseau
async function getUsers() `);
return await res.json();
} catch (err)
}// Promise.all — requêtes parallèles
const [users, posts] = await Promise.all([
fetch(« /api/users »).then(r => r.json()),
fetch(« /api/posts »).then(r => r.json()),
]);

🆕 Nouvelles features ES2024-2025

// Object.groupBy (ES2024)
const grouped = Object.groupBy(products, p => p.category);// Promise.withResolvers (ES2024)
const = Promise.withResolvers();

// Set methods (ES2025)
const a = new Set([1, 2, 3]);
const b = new Set([2, 3, 4]);
a.intersection(b); // Set
a.union(b); // Set
a.difference(b); // Set

🧠 Quiz

Quelle est la différence entre ?? et || ?

|| retourne la valeur de droite si la gauche est falsy (0, « », false, null, undefined). ?? (nullish coalescing) retourne la droite uniquement si la gauche est null ou undefined. Donc 0 ?? 42 donne 0, mais 0 || 42 donne 42.

CHAPITRE 05

TypeScript pour le front-end

🔷 Pourquoi TypeScript est devenu le standard

En 2026, TypeScript n'est plus optionnel — c'est le choix par défaut pour tout projet front-end sérieux. React, Vue, Next.js, Angular : tous offrent une DX optimale en TS.

// Types de base pour le front-end
interface User // Props de composant React
interface ButtonProps

// Generics — types réutilisables
interface ApiResponse<T>

👉 Voir notre cours TypeScript complet (12 chapitres)

🛡️ Patterns TypeScript fréquents en front-end

// Discriminated unions — état d'une requête
type RequestState<T> =
|
|
|
| ;// Utility types
type UserPreview = Pick<User, « id » | « name » | « avatar »>;
type EditableUser = Partial<Omit<User, « id »>>;

// as const — valeurs littérales immuables
const ROUTES = as const;

Erreur classique : typer avec any partout. Autant rester en JavaScript. Si vous ne savez pas le type, utilisez unknown et faites un type guard.

🧠 Quiz

Quelle est la différence entre interface et type en TypeScript ?

Les deux définissent des formes d'objets. interface peut être étendue et fusionnée. type est plus flexible : unions, intersections, mapped types. En pratique, interface pour les objets/props, type pour les unions et utilitaires.

CHAPITRE 06

React en 2026

⚛️ React 19 — les changements majeurs

React 19 est la plus grosse mise à jour depuis les hooks. Les Server Components sont stables, le compilateur optimise automatiquement, et de nouveaux hooks simplifient les patterns courants.

// useActionState — formulaires avec état
import from « react »;function LoginForm() ;
redirect(« /dashboard »);
},

);

return (
action=>
name=« email » type=« email » />
name=« password » type=« password » />
disabled=>

}

);
}

👉 Voir notre cours React complet (12 chapitres)

🧩 Les hooks essentiels (récap)

Hook	Usage	Exemple
useState	État local	Compteur, toggle, valeur d'input
useEffect	Effets de bord	Fetch, event listeners, timers
useRef	Référence persistante	DOM, valeurs entre rendus
useMemo	Cache un calcul	Filtrage/tri coûteux
useCallback	Cache une fonction	Props stables pour React.memo
useContext	État global léger	Thème, auth, langue
useActionState	Actions formulaire (R19)	Login, CRUD, soumission
use	Lire ressources (R19)	Lire une Promise ou un Context

React 19 + compilateur : le compilateur mémoïse automatiquement. useMemo, useCallback et React.memo deviennent moins nécessaires, mais gardez-les pour l'instant — le compilateur n'est pas encore partout.

🧠 Quiz

Qu'est-ce qu'un Server Component en React 19 ?

Un composant qui s'exécute uniquement sur le serveur. Il accède directement à la DB/API. Son JS n'est jamais envoyé au client, réduisant le bundle. Dans Next.js App Router, tous les composants sont Server Components par défaut (ajouter « use client » pour un Client Component).

CHAPITRE 07

Vue.js & alternatives

💚 Vue 3 — le framework progressif

Vue 3 avec la Composition API est excellent si vous trouvez React trop « bas niveau ». Vue offre une réactivité fine (pas besoin de mémorisation), une syntaxe de template intuitive, et un écosystème cohérent.

@click=« increment »>
} (double: })

👉 Voir notre cours Vue.js complet (12 chapitres)

🔥 Svelte 5 & Solid.js — les challengers

// SVELTE 5 — Runes
// SOLID.JS — Réactivité fine-grained
import from « solid-js »;
function Counter() >;
}

Framework	Force	À considérer si…
React	Écosystème, emploi, communauté	Plus d'opportunités pro
Vue	DX, courbe d'apprentissage	Vous préférez la simplicité
Svelte	Performance, zéro runtime	Moins de boilerplate
Solid	Performance brute	Vous aimez React + perf

🧠 Quiz

Qu'est-ce que les « Signals » et pourquoi tous les frameworks les adoptent ?

Les Signals sont un modèle de réactivité fine-grained : quand une donnée change, seuls les éléments du DOM concernés sont mis à jour. Vue (ref), Solid (createSignal), Svelte 5 ($state), Angular (signal) les utilisent. React reste sur le re-render + diffing.

CHAPITRE 08

Next.js & meta-frameworks

▲ Next.js 15 — App Router & Server Components

// app/page.tsx — Server Component (par défaut)
export default async function HomePage() );
return (

Blog

))}

);
}

👉 Voir notre cours Next.js complet (12 chapitres)

🗺️ Les meta-frameworks en 2026

Meta-framework	Framework UI	Point fort	Idéal pour
Next.js	React	Écosystème, Vercel, RSC	Apps full-stack, SaaS
Nuxt	Vue	DX, auto-imports	Sites vitrines, apps Vue
SvelteKit	Svelte	Performance, simplicité	Sites rapides
Astro	Agnostique	Zéro JS par défaut	Blogs, docs, contenu
Remix	React	Web standards, loaders	Apps avec formulaires

Astro mérite une mention spéciale : HTML statique par défaut, JS uniquement pour les composants interactifs (« islands »). Idéal pour blogs et docs.

🧠 Quiz

Quelle est la différence entre SSR, SSG et ISR ?

SSR : page générée à chaque requête. SSG : page générée au build. ISR : SSG + re-génération en arrière-plan. Next.js supporte les trois.

CHAPITRE 09

Tailwind CSS & styling moderne

🌊 Tailwind v4 — le nouveau moteur

Tailwind CSS v4 : moteur Rust (10x plus rapide), configuration CSS-first, nouvelles fonctionnalités.

 class=« bg-blue-600 text-white px-6 py-3 rounded-lg

hover:bg-blue-700 active:scale-95

transition-all duration-200

disabled:opacity-50 disabled:cursor-not-allowed »>

Envoyer

class=« grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 »>…

class=« bg-white dark:bg-gray-900 text-black dark:text-white »>…

👉 Voir notre cours Tailwind CSS complet (12 chapitres)

🎨 Les approches de styling en 2026

Approche	Pour	Contre
Tailwind CSS	Rapide, cohérent, performant	HTML verbeux
CSS Modules	Scope local, familier	Fichiers séparés
CSS-in-JS	Dynamique, colocalisé	Runtime cost, SSR complexe
CSS vanille	Standard, zéro dépendance	Scope global, maintenance
shadcn/ui	Copy/paste, customisable	Pas une vraie lib npm

Tendance 2026 : Tailwind + shadcn/ui est la combo la plus populaire dans l'écosystème React/Next.js. shadcn/ui fournit des composants accessibles que vous copiez et personnalisez dans votre projet.

🧠 Quiz

Pourquoi Tailwind v4 est plus rapide que v3 ?

Tailwind v4 a été réécrit avec un moteur en Rust (au lieu de JS/PostCSS). Build ~10x plus rapide. La configuration se fait en CSS avec @theme au lieu de tailwind.config.js.

CHAPITRE 10

Performance & Core Web Vitals

📊 Les métriques qui comptent

Métrique	Mesure	Bon	Mauvais
LCP	Temps d'affichage du plus gros élément visible	≤ 2.5s	> 4s
INP	Réactivité aux clics/inputs (remplace FID)	≤ 200ms	> 500ms
CLS	Stabilité visuelle (décalages inattendus)	≤ 0.1	> 0.25

Impact SEO direct : Google utilise les Core Web Vitals comme facteur de ranking. Un mauvais LCP ou CLS peut pénaliser votre positionnement.

⚡ Optimisations essentielles

/* 1. IMAGES — format moderne + lazy loading */

src=« photo.webp »

srcset=« photo-400.webp 400w, photo-800.webp 800w »

sizes=« (max-width: 768px) 100vw, 50vw »

loading=« lazy » alt=« Description »

/>

/* 2. FONTS — preload + display swap */
rel=« preload » href=« /fonts/inter.woff2 » as=« font » crossorigin>

/* 3. CODE SPLITTING — import dynamique */
const HeavyChart = lazy(() => import('./HeavyChart'));

/* 4. PRECONNECT aux domaines tiers */
rel=« preconnect » href=« https://fonts.googleapis.com »>

🔧 Checklist performance front-end

Performance Checklist

Images en WebP/AVIF avec srcset et loading= »lazy »

Fonts en woff2 avec font-display: swap et preload

Code splitting avec import() dynamique

CSS critique inline, le reste en defer

Preconnect aux CDN et API tierces

Minification HTML/CSS/JS en production

Compression Brotli ou gzip sur le serveur

Cache headers correctement configurés

Tree-shaking activé (Vite/webpack)

Audit Lighthouse ≥ 90 sur les 4 catégories

🧠 Quiz

Quelle métrique a remplacé FID dans les Core Web Vitals ?

INP (Interaction to Next Paint). Contrairement à FID qui mesurait uniquement la première interaction, INP mesure la réactivité sur toutes les interactions. Bon INP ≤ 200ms.

CHAPITRE 11

Outils : Vite, ESLint, Testing

⚡ Vite — le build tool standard

# Créer un projet avec Vite

npm create vite@latest mon-projet — –template react-ts

# Structure
mon-projet/
├── index.html
├── vite.config.ts
├── tsconfig.json
├── package.json
└── src/
├── main.tsx
├── App.tsx
└── components/

// vite.config.ts

import  from 'vite';

import react from '@vitejs/plugin-react';

export default defineConfig(,
build: ,
resolve: },
});

Pourquoi Vite a remplacé Webpack : démarrage instantané (ES modules natifs en dev), HMR ultra-rapide, configuration minimale, build de production optimisé avec Rollup.

🔍 ESLint 9 + Prettier

// eslint.config.js — Flat config (ESLint 9+)

import js from '@eslint/js';

import tseslint from 'typescript-eslint';

import react from 'eslint-plugin-react';

export default [
js.configs.recommended,
…tseslint.configs.recommended,
,
rules: ,
},
];

ESLint 9 = « flat config ». Fini les .eslintrc.json imbriqués. Un seul fichier eslint.config.js qui exporte un tableau.

🧪 Testing — Vitest + Testing Library + Playwright

// Tests unitaires — Vitest + Testing Library

import  from '@testing-library/react';

import  from 'vitest';

import Counter from './Counter';

describe('Counter', () => );
});

// Tests E2E — Playwright
import from '@playwright/test';

test('login flow', async () => );

Outil	Type	Remplace
Vitest	Tests unitaires/intégration	Jest
Testing Library	Tests de composants	Enzyme
Playwright	Tests E2E (navigateur)	Cypress, Selenium
MSW	Mock d'API	Nock, fetch mocks

🧠 Quiz

Pourquoi Vitest est préféré à Jest en 2026 ?

Vitest utilise le même pipeline que Vite, donc aucune configuration séparée. Compatible avec l'API Jest, supporte TypeScript et ESM nativement, mode watch ultra-rapide grâce au HMR.

CHAPITRE 12

Roadmap & architecture front-end

🗺️ Roadmap d'apprentissage front-end (2026)

Étape	Technologies	Durée	Objectif
1. Fondations	HTML, CSS (Flexbox, Grid), JS ES6+	2-3 mois	Pages statiques et interactives
2. TypeScript	Types, interfaces, generics	2-4 sem.	Sécurité des types
3. Framework UI	React (ou Vue/Svelte)	2-3 mois	SPA avec composants
4. Styling	Tailwind CSS, responsive	2-3 sem.	Styliser rapidement
5. Meta-framework	Next.js (ou Nuxt/SvelteKit)	1-2 mois	SSR, routing, déploiement
6. Outils	Vite, ESLint, Vitest, Playwright	2-4 sem.	Workflow professionnel
7. Expertise	Performance, accessibilité, archi	Continu	Niveau senior

Total réaliste : 8-12 mois pour être opérationnel en junior. L'expertise senior vient avec les projets réels et la veille continue.

🏗️ Architecture — structurer un projet

# Structure recommandée (Next.js / React)

src/

├── app/ # Routes (App Router)

│ ├── layout.tsx

│ ├── page.tsx

│ └── api/

├── components/ # Composants réutilisables

│ ├── ui/ # Boutons, inputs (shadcn)

│ └── features/ # Composants métier

├── hooks/ # Custom hooks

├── lib/ # Utilitaires, config

├── types/ # Types TS partagés

└── styles/ # CSS global

🔑 Principes d'architecture front-end

Principe	En pratique
Colocalisation	Fichiers liés ensemble (composant + style + test + types)
Composition > héritage	Composez des petits composants, ne pas hériter de gros composants
Single Responsibility	Un composant = une responsabilité. > 200 lignes ? Découpez.
DRY avec modération	Dupliquez 2 fois avant d'abstraire. L'abstraction prématurée est pire.
État minimal	Dérivez les données (computed/useMemo) plutôt que stocker des doublons
Server-first	Maximum côté serveur (fetch, auth, SEO). Client = interactivité.

« La meilleure architecture est celle que toute l'équipe comprend. » Ne sur-architecturez pas un MVP. Commencez simple, refactorisez quand la complexité l'exige.

🧠 Quiz

Qu'est-ce que la colocalisation et pourquoi est-ce important ?

La colocalisation = placer les fichiers liés dans le même répertoire (composant, style, test, types). Quand vous supprimez un composant, vous supprimez tout son dossier — pas de fichiers orphelins.

Pourquoi dit-on « Server-first » en 2026 ?

Avec les Server Components, on fait le fetch, l'auth et le rendu HTML sur le serveur. Meilleur SEO (HTML prêt), meilleure performance (moins de JS au client), sécurité (clés API côté serveur). Le client ne gère que l'interactivité.

✅ Checklist du développeur front-end moderne

Maîtriser HTML sémantique et accessibilité de base

Connaître Flexbox, Grid, Container Queries et :has()

Écrire du JavaScript ES2024+ idiomatique

Utiliser TypeScript avec des types stricts (pas de any)

Maîtriser au moins un framework (React, Vue ou Svelte)

Savoir utiliser un meta-framework (Next.js, Nuxt, SvelteKit ou Astro)

Styliser efficacement avec Tailwind CSS ou CSS Modules

Optimiser les Core Web Vitals (LCP, INP, CLS)

Configurer Vite, ESLint et Prettier

Écrire des tests (Vitest + Playwright)

Versionner avec Git et déployer sur Vercel/Cloudflare

Faire de la veille technique régulière

📚 Approfondir chaque technologie

🏠 Hub Programmation
🎨 HTML & CSS
⚡ JavaScript
🔷 TypeScript
⚛️ React
💚 Vue.js
▲ Next.js
🌊 Tailwind CSS
🟢 Node.js
📦 Git & GitHub
🐳 Docker

❓ FAQ — Questions fréquentes

Quel framework front-end apprendre en premier en 2026 ?

React reste le choix le plus pragmatique pour l'employabilité. Vue est excellent pour débuter. Svelte si vous avez déjà de l'expérience et cherchez la performance maximale.

Faut-il apprendre TypeScript ou JavaScript d'abord ?

JavaScript d'abord, puis TypeScript rapidement après. Comprendre les fondamentaux JS (closures, prototypes, event loop) est essentiel, mais ne restez pas en JS pur trop longtemps.

Tailwind CSS ou CSS classique ?

Les deux. Comprendre CSS natif (Flexbox, Grid, cascade) est indispensable — Tailwind est une abstraction au-dessus. Mais pour la productivité en projet réel, Tailwind accélère considérablement le développement.

Combien de temps pour devenir développeur front-end ?

8-12 mois d'apprentissage intensif pour être opérationnel en junior. L'expertise vient avec la pratique : projets personnels, open-source, et veille régulière.

Next.js est-il obligatoire ?

Non. Un SPA React avec Vite suffit pour beaucoup de projets. Utilisez Next.js si vous avez besoin de SSR, SEO, ou API routes intégrées. Pour un site de contenu, Astro est souvent un meilleur choix.