11.3 — Intégration Next.js (App Router)

⏱️ TL;DR — En App Router : importez le CSS de Bootstrap dans app/layout.js (composant serveur, OK). Pour le JS, ne l’importez jamais côté serveur — utilisez react-bootstrap (composants client) ou un import dynamique dans un composant 'use client'. Pour le dark mode, next-themes avec attribute="data-bs-theme". Personnalisez via un fichier Sass.

🎯 Objectifs

Importer le CSS au bon endroit.
Gérer les composants interactifs côté client.
Brancher le dark mode et le Sass.

1. Le CSS dans le layout


// app/layout.js  (composant serveur — l'import CSS est autorisé ici)
import 'bootstrap/dist/css/bootstrap.min.css'
// ou, mieux, votre build Sass personnalisé :
// import './bootstrap-custom.scss'
 
export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>{children}</body>
    </html>
  )
}

2. Sass personnalisé


npm install sass


/* app/bootstrap-custom.scss */
@import "bootstrap/scss/functions";
$primary: #7952b3;
@import "bootstrap/scss/variables";
@import "bootstrap/scss/bootstrap";

Next.js compile le .scss automatiquement (paquet sass présent). Vous obtenez votre thème sans configuration supplémentaire.

3. Composants interactifs (client)


'use client'
import { Navbar, Nav, Container } from 'react-bootstrap'
 
export function SiteNav() {
  return (
    <Navbar expand="lg" bg="dark" data-bs-theme="dark">
      <Container>
        <Navbar.Brand href="/">MonApp</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse>
          <Nav>
            <Nav.Link href="/produits">Produits</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}

Le 'use client' est indispensable : ces composants gèrent de l’état et des écouteurs.

4. Dark mode avec next-themes


npm install next-themes


'use client'
import { ThemeProvider } from 'next-themes'
export function Providers({ children }) {
  return (
    <ThemeProvider attribute="data-bs-theme" defaultTheme="system">
      {children}
    </ThemeProvider>
  )
}

attribute="data-bs-theme" fait que next-themes écrit exactement l’attribut attendu par Bootstrap 5.3 — persistance et anti-flash gérés. Ajoutez suppressHydrationWarning sur <html>.

5. Images

Utilisez next/image pour les images (optimisation, lazy-loading) et les classes de forme Bootstrap (className="rounded"), mais laissez next/image gérer les dimensions (pas de img-fluid).

⚠️ Piège — Importer bootstrap/dist/js/bootstrap.bundle dans layout.js (serveur) casse le build (window is not defined). Le JS ne doit vivre que dans des composants 'use client' — ou, idéalement, ne pas être importé du tout au profit de react-bootstrap.

💡 Pour un dev React — Récapitulatif Next.js : CSS/Sass → layout serveur ✅ ; composants interactifs → react-bootstrap en 'use client' ✅ ; dark mode → next-themes + data-bs-theme ✅ ; JS natif Bootstrap → à éviter ⛔.

✏️ Exercices

Où importer le CSS de Bootstrap dans une app App Router ?

✅ Solution

Dans app/layout.js (composant serveur) : import 'bootstrap/dist/css/bootstrap.min.css'.

Quelle prop de ThemeProvider relie next-themes à Bootstrap 5.3 ?

✅ Solution

attribute="data-bs-theme".

🧠 Quiz de révision

1. Où importer le CSS Bootstrap en App Router ?

Dans app/layout.js (serveur).

2. Peut-on importer le JS Bootstrap dans un composant serveur ?

Non (window is not defined).

3. Comment personnaliser le thème en Next.js ?

Un fichier .scss importé dans le layout (paquet sass installé).

4. Quelle lib pour le dark mode ?

next-themes avec attribute="data-bs-theme".

5. Quel composant pour les images ?

next/image (+ classes de forme Bootstrap).

Chapitre suivant : 11.4 — Quand (ne pas) choisir Bootstrap en React