Pourquoi Next.js ?

1.1React seul vs Next.js

Avec React tout seul (Create React App ou Vite), tu obtiens une Single Page Application (SPA). Tout se passe côté navigateur. C'est très bien pour une appli interne, un dashboard...

Mais dès que tu veux un vrai site (un blog, une boutique, une plateforme), tu te heurtes à des problèmes :

• SEO inexistant : Google voit une page vide parce que tout est généré en JavaScript côté client.
• Temps de chargement : l'utilisateur doit tout télécharger avant de voir quoi que ce soit.
• Routing à configurer : tu dois installer et configurer React Router toi-même.
• Pas d'API intégrée : tu dois monter un serveur Express à côté.

1.2Ce que Next.js t'offre

Voici les super-pouvoirs que tu débloques en passant à Next.js :

1.3Créer ton premier projet

C'est parti ! Une seule commande et tu as un projet tout prêt :

npx create-next-app@latest mon-super-site

L'assistant te pose quelques questions. Pour l'instant, accepte les options par défaut (TypeScript, App Router, Tailwind). Tu verras à quoi chacune sert au fil des chapitres.

Ensuite, lance le serveur de développement :

cd mon-super-site
npm run dev

Ouvre http://localhost:3000 dans ton navigateur. Tadaa ! Ton site Next.js tourne déjà. Pas mal pour 2 commandes, non ?

1.4La structure du projet

Quand tu ouvres le dossier, voilà ce que tu trouves :

mon-super-site/
├── app/                  # Tes pages et layouts (le cœur du site)
│   ├── layout.tsx        # Le squelette commun à toutes tes pages
│   ├── page.tsx          # La page d'accueil (route "/")
│   └── globals.css       # Les styles globaux
├── public/               # Fichiers statiques (images, favicon...)
├── next.config.ts        # Configuration de Next.js
├── package.json          # Dépendances du projet
└── tsconfig.json         # Configuration TypeScript

Le dossier app/ est le plus important. C'est là que tu vas passer 90% de ton temps. Chaque fichier page.tsx que tu crées dedans devient automatiquement une page de ton site. Magique ? Non, c'est juste Next.js.

1.5Ta première modification

Ouvre app/page.tsx et remplace tout le contenu par :

export default function Home() {
  return (
    <main>
      <h1>Bienvenue sur mon site Next.js !</h1>
      <p>C'est moi qui l'ai fait, et ça marche.</p>
    </main>
  )
}

Sauvegarde. Regarde ton navigateur : la page s'est mise à jour toute seule ! C'est le Fast Refresh de Next.js. Chaque modification apparaît instantanément, sans recharger la page.