Next.js 16 Leçon 1 : Installation & create-next-app

Qu’est-ce que Next.js 16 ?

Next.js est un framework React full-stack open-source créé par Vercel. Il ajoute au-dessus de React tout ce dont vous avez besoin pour une vraie application web : routage basé sur les fichiers, rendu serveur, gestion du cache, Server Actions, optimisation des images… Tout ça sans configuration.

React seul

// Vous gérez vous-même :
// - le routeur (React Router)
// - le fetching (useEffect + fetch)
// - le bundler (Vite / Webpack)
// - le SEO (balises meta manuelles)
// - le rendu serveur (DIY)

Next.js 16

// Tout inclus dès le départ :
// ✅ App Router (fichiers = routes)
// ✅ Server Components + fetch natif
// ✅ Turbopack (bundler ultra-rapide)
// ✅ Métadonnées SEO intégrées
// ✅ Rendu serveur automatique

Next.js 16 est la dernière version majeure. Sa grande nouveauté : Turbopack stable par défaut (le nouveau bundler Rust, jusqu’à 10x plus rapide que Webpack) et les Cache Components, un nouveau modèle de cache bien plus explicite.

Prérequis

Avant de commencer, vérifiez que vous avez :

Node.js 20.9+ (Next.js 16 ne supporte plus Node 18)
npm 10+ ou pnpm / yarn
VS Code avec l’extension ES7 React Snippets et ESLint

Terminal

# Vérifier votre version de Node
node -v
# Doit afficher v20.9.0 ou supérieur

# Si besoin, installer Node via nvm :
nvm install 20
nvm use 20

Créer un projet avec create-next-app

Une seule commande suffit pour démarrer. create-next-app configure automatiquement TypeScript, Tailwind CSS, ESLint et l’App Router :

Terminal

npx create-next-app@latest mon-projet

L’assistant vous pose quelques questions. Voici les réponses recommandées pour ce cours :

Terminal questions de l’assistant

Would you like to use TypeScript?          Yes
Would you like to use ESLint?              Yes
Would you like to use Tailwind CSS?        Yes
Would you like your code inside a src/ directory?  No
Would you like to use App Router?          Yes
Would you like to use Turbopack for next dev?  Yes
Would you like to customize the import alias?  No

💡

Turbopack activé par défaut

Dans Next.js 16, Turbopack est le bundler par défaut pour tous les nouveaux projets. Il remplace Webpack et est écrit en Rust — les compilations sont jusqu’à 5x plus rapides, le Fast Refresh jusqu’à 10x plus rapide.

Structure du projet généré

Structure mon-projet/

mon-projet/
├── app/
│   ├── layout.tsx       # Layout racine (HTML, body, métadonnées)
│   ├── page.tsx         # Page d'accueil → route "/"
│   └── globals.css      # Styles globaux + directives Tailwind
├── public/              # Fichiers statiques (images, fonts...)
├── next.config.ts       # Configuration de Next.js
├── tsconfig.json        # Configuration TypeScript
├── tailwind.config.ts   # Configuration Tailwind
└── package.json

ℹ️

La règle de l’App Router

Dans Next.js 16, chaque dossier dans app/ devient un segment d’URL. Un fichier page.tsx à l’intérieur rend ce segment accessible. Un fichier layout.tsx enveloppe les pages enfants. Pas besoin de configurer des routes manuellement.

Lancer le serveur de développement

Terminal

cd mon-projet
npm run dev

Ouvrez http://localhost:3000. Vous devriez voir la page d’accueil par défaut de Next.js 16. Dans le terminal, notez le message Turbopack — c’est le nouveau bundler en action :

Terminal output

   ▲ Next.js 16 (Turbopack)
   - Local:        http://localhost:3000
   - Environments: .env.local

 ✓ Starting...
 ✓ Ready in 412ms

Comprendre page.tsx

Ouvrez app/page.tsx. Par défaut, c’est un Server Component — il s’exécute côté serveur, pas dans le navigateur. Remplacez tout son contenu par ceci :

TypeScript app/page.tsx

export default function Page() {
  return (
    <main className="min-h-screen bg-gray-950 text-white flex items-center justify-center">
      <div className="text-center space-y-4">
        <h1 className="text-5xl font-bold">
          Mon app Next.js <span className="text-white/60">16</span>
        </h1>
        <p className="text-gray-400 text-lg">
          Turbopack • App Router • TypeScript
        </p>
        <a
          href="/blog"
          className="inline-block bg-white text-gray-950 px-6 py-3 rounded-xl font-semibold hover:bg-gray-100 transition-colors"
        >
          Découvrir →
        </a>
      </div>
    </main>
  );
}

💡

className, pas class

En JSX/TSX, l’attribut HTML class s’écrit className. C’est une contrainte de React car class est un mot réservé en JavaScript. VS Code vous le signalera automatiquement si vous faites l’erreur.

Comprendre layout.tsx

app/layout.tsx est le layout racine. Il enveloppe toutes les pages de l’application. C’est ici qu’on définit les métadonnées globales (<title>, <meta>), les polices, et les styles partagés :

TypeScript app/layout.tsx

import type { Metadata } from 'next';
import './globals.css';

export const metadata: Metadata = {
  title: 'Mon app Next.js 16',
  description: 'Construite avec Next.js 16 et Turbopack',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="fr">
      <body>
        {children}
      </body>
    </html>
  );
}

L’objet metadata remplace les balises <head> manuelles. Next.js génère automatiquement les balises <title> et <meta name="description"> — et même les balises Open Graph si vous les ajoutez.

next.config.ts

Le fichier de configuration principal. Dans Next.js 16, il est en TypeScript natif et dispose d’un meilleur typage :

TypeScript next.config.ts

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // Active les Cache Components (nouveau système de cache Next.js 16)
  cacheComponents: true,

  // Autorise les images externes (optionnel)
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'images.unsplash.com' },
    ],
  },
};

export default nextConfig;

⚠️

Tout changement dans next.config.ts nécessite un redémarrage

Contrairement aux composants, les modifications de next.config.ts ne sont pas prises en compte par le Hot Reload. Faites Ctrl+C puis relancez npm run dev.

Scripts npm utiles

Terminal

# Démarrer en développement (Turbopack)
npm run dev

# Build de production
npm run build

# Lancer le serveur de production (après build)
npm run start

# Forcer Webpack au lieu de Turbopack (si conflit)
next dev --webpack

Exercice pratique

Mettez en pratique ce que vous venez d’apprendre :

Créez un nouveau projet avec create-next-app
Modifiez app/page.tsx : affichez votre prénom en grand avec Tailwind
Ajoutez un objet metadata dans layout.tsx avec votre propre titre et description
Créez un dossier app/apropos/ avec un fichier page.tsx — visitez localhost:3000/apropos
Observez dans le terminal la vitesse de compilation de Turbopack à chaque sauvegarde

💡

À retenir de cette leçon

App Router = chaque dossier dans app/ est une route, page.tsx la rend accessible. Turbopack = bundler par défaut, ultra-rapide. Server Components = par défaut, vos composants s’exécutent côté serveur (on verra ça en leçon 3). La leçon suivante : App Router en profondeur — layouts imbriqués, routes dynamiques, loading et error states.