1// Structure d'un projet Next.js 16
2app/
3├── layout.tsx          // Layout racine
4├── page.tsx            // Page d'accueil
5├── about/
6│   └── page.tsx        // Route /about
7└── blog/
8    ├── page.tsx        // Liste des articles
9    └── [slug]/
10        └── page.tsx    // Article individuel
11
12// Exemple de page simple
13export default function Home() {
14  return (
15    <main>
16      <h1>Bienvenue sur Next.js 16</h1>
17    </main>
18  );
19}

1// Page SSR avec données dynamiques
2export default async function UserProfile({
3  params
4}: {
5  params: Promise<{ id: string }>
6}) {
7  const { id } = await params;
8
9  // Cette fonction s'exécute côté serveur à chaque requête
10  const user = await fetch(`https://api.example.com/users/${id}`, {
11    cache: 'no-store' // Pas de cache, données toujours fraîches
12  }).then(res => res.json());
13
14  return (
15    <div>
16      <h1>{user.name}</h1>
17      <p>Dernière connexion : {new Date(user.lastLogin).toLocaleString()}</p>
18    </div>
19  );
20}
21
22// Les composants sont Server Components par défaut dans Next.js 16

1// Page statique générée au build
2export default async function BlogPost({
3  params
4}: {
5  params: Promise<{ slug: string }>
6}) {
7  const { slug } = await params;
8
9  // Cette fonction s'exécute UNE SEULE FOIS au build
10  const post = await fetch(`https://api.example.com/posts/${slug}`, {
11    cache: 'force-cache' // Cache permanent
12  }).then(res => res.json());
13
14  return (
15    <article>
16      <h1>{post.title}</h1>
17      <div dangerouslySetInnerHTML={{ __html: post.content }} />
18    </article>
19  );
20}
21
22// Génère toutes les pages possibles au build
23export async function generateStaticParams() {
24  const posts = await fetch('https://api.example.com/posts')
25    .then(res => res.json());
26
27  return posts.map((post: { slug: string }) => ({
28    slug: post.slug,
29  }));
30}

1// Page ISR avec revalidation toutes les 60 secondes
2export default async function ProductPage({
3  params
4}: {
5  params: Promise<{ id: string }>
6}) {
7  const { id } = await params;
8
9  // Revalidation toutes les 60 secondes
10  const product = await fetch(`https://api.example.com/products/${id}`, {
11    next: { revalidate: 60 } // Clé magique ISR
12  }).then(res => res.json());
13
14  return (
15    <div>
16      <h1>{product.name}</h1>
17      <p className="text-2xl font-bold">{product.price} €</p>
18      <p className="text-sm text-gray-500">
19        Stock : {product.stock} unités
20      </p>
21    </div>
22  );
23}
24
25// Ou revalidation à la demande (on-demand)
26export async function generateStaticParams() {
27  const products = await fetch('https://api.example.com/products')
28    .then(res => res.json());
29
30  return products.map((product: { id: string }) => ({
31    id: product.id,
32  }));
33}

1'use client';
2
3import { useState, useEffect } from 'react';
4
5interface User {
6  id: number;
7  name: string;
8  email: string;
9}
10
11export default function UsersPage() {
12  const [users, setUsers] = useState<User[]>([]);
13  const [loading, setLoading] = useState(true);
14
15  // Fetch côté client au montage du composant
16  useEffect(() => {
17    async function fetchUsers() {
18      try {
19        const res = await fetch('/api/users');
20        const data = await res.json();
21        setUsers(data);
22      } catch (error) {
23        console.error('Erreur fetch:', error);
24      } finally {
25        setLoading(false);
26      }
27    }
28
29    fetchUsers();
30  }, []); // Exécuté une seule fois après le premier render
31
32  if (loading) {
33    return <div>Chargement des utilisateurs...</div>;
34  }
35
36  return (
37    <div>
38      <h1>Liste des utilisateurs</h1>
39      <ul>
40        {users.map((user) => (
41          <li key={user.id}>
42            {user.name} - {user.email}
43          </li>
44        ))}
45      </ul>
46    </div>
47  );
48}

1// app/products/page.tsx (Server Component par défaut)
2import { ProductList } from './product-list';
3import { AddToCartButton } from './add-to-cart-button';
4
5export default async function ProductsPage() {
6  // Fetch côté serveur - données disponibles immédiatement
7  const products = await fetch('https://api.example.com/products').then(r => r.json());
8
9  return (
10    <div>
11      <h1>Nos produits</h1>
12      {/* Server Component - rendu HTML statique */}
13      <ProductList products={products} />
14    </div>
15  );
16}
17
18// app/products/product-list.tsx (Server Component)
19import { AddToCartButton } from './add-to-cart-button';
20
21export function ProductList({ products }: { products: Product[] }) {
22  return (
23    <ul>
24      {products.map((product) => (
25        <li key={product.id}>
26          <h2>{product.name}</h2>
27          <p>{product.price} €</p>
28          {/* Client Component isolé - seulement pour l'interactivité */}
29          <AddToCartButton productId={product.id} />
30        </li>
31      ))}
32    </ul>
33  );
34}
35
36// app/products/add-to-cart-button.tsx (Client Component)
37'use client';
38
39import { useState } from 'react';
40
41export function AddToCartButton({ productId }: { productId: number }) {
42  const [added, setAdded] = useState(false);
43
44  const handleClick = () => {
45    // Logique interactive côté client
46    setAdded(true);
47    // ... appel API pour ajouter au panier
48  };
49
50  return (
51    <button onClick={handleClick}>
52      {added ? 'Ajouté !' : 'Ajouter au panier'}
53    </button>
54  );
55}

1'use client';
2
3export function CurrentTime() {
4  const [time, setTime] = useState(new Date().toLocaleTimeString());
5
6  useEffect(() => {
7    const interval = setInterval(() => {
8      setTime(new Date().toLocaleTimeString());
9    }, 1000);
10    return () => clearInterval(interval);
11  }, []);
12
13  // Supprime l'avertissement car le contenu serveur/client est volontairement différent
14  return <div suppressHydrationWarning>{time}</div>;
15}

1// ❌ Mauvais : Tout le layout devient client
2'use client';
3
4export default function Layout({ children }: { children: React.ReactNode }) {
5  const [menuOpen, setMenuOpen] = useState(false);
6
7  return (
8    <div>
9      <Header />
10      <button onClick={() => setMenuOpen(!menuOpen)}>Menu</button>
11      {children}
12      <Footer />
13    </div>
14  );
15}
16
17// ✅ Bon : Seul le bouton menu est client
18import { MenuButton } from './menu-button';
19
20export default function Layout({ children }: { children: React.ReactNode }) {
21  return (
22    <div>
23      <Header />
24      <MenuButton /> {/* Composant client isolé */}
25      {children}
26      <Footer />
27    </div>
28  );
29}
30
31// menu-button.tsx
32'use client';
33export function MenuButton() {
34  const [menuOpen, setMenuOpen] = useState(false);
35  return <button onClick={() => setMenuOpen(!menuOpen)}>Menu</button>;
36}

1'use client'; // Directive obligatoire en haut du fichier
2
3import { useState } from 'react';
4
5export function Counter() {
6  const [count, setCount] = useState(0);
7
8  return (
9    <div>
10      <p>Compteur : {count}</p>
11      <button onClick={() => setCount(count + 1)}>
12        Incrémenter
13      </button>
14    </div>
15  );
16}
17
18// ❌ Sans 'use client', cette erreur apparaît :
19// "You're importing a component that needs useState.
20// It only works in a Client Component but none of its
21// parents are marked with 'use client'"