Partie 11 — Bootstrap avec React & Next.js
⏱️ TL;DR — Trois façons d’utiliser Bootstrap en React : (1) le CSS seul + vos composants ; (2) react-bootstrap (composants React officiels) ; (3) le CSS et le JS natif — à éviter avec le SSR. Cette partie explique pourquoi le JS
data-bs-*s’entend mal avec React, et comment intégrer proprement Bootstrap dans une app Next.js App Router.
🎯 Ce que vous saurez faire
- Comprendre le conflit JS natif ↔ cycle de vie React/SSR.
- Utiliser
react-bootstrappour les composants interactifs. - Intégrer Bootstrap (CSS + thème + dark mode) dans Next.js.
- Décider si Bootstrap est le bon choix pour votre projet React.
🗂️ Les chapitres
| # | Chapitre | En un mot |
|---|---|---|
| 11.1 | Pourquoi le JS natif casse | DOM impératif vs virtual DOM / SSR |
| 11.2 | react-bootstrap | Les composants React officiels |
| 11.3 | Intégration Next.js | App Router, CSS, dark mode |
| 11.4 | Quand (ne pas) choisir Bootstrap | Arbre de décision |
Premier chapitre : 11.1 — Pourquoi le JS natif casse en React/SSR