Pourquoi Next.js ?

React c'est cool, mais Next.js c'est React avec des super-pouvoirs.

Imagine : tu as appris à maîtriser un personnage (React). Tu connais ses attaques, ses combos, son gameplay. Mais pour affronter les vrais donjons, il te manque l'équipement : armure, potions, carte du monde. Next.js, c'est le kit complet qui transforme ton personnage en héros prêt pour l'aventure.

Next.js ne remplace pas React : il le booste. Il s'occupe de tout ce qui est pénible à configurer toi-même : le routing, le rendu serveur, l'optimisation des images, le SEO...

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é.

Le raccourci

Next.js résout tous ces problèmes d'un coup. Pas besoin de bricoler 15 librairies ensemble.

1.2Ce que Next.js t'offre

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

🗺️

Routing automatique

Tu crées un fichier, tu as une route. Zéro configuration.

⚡

Rendu serveur

Tes pages sont pré-rendues côté serveur. Ultra rapide + SEO au top.

🖼️

Optimisation des images

Les images sont compressées et redimensionnées automatiquement.

API intégrée

Tu peux créer des endpoints API directement dans ton projet.

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.

Pas de panique !

Tu n'as pas besoin de comprendre tous les fichiers maintenant. On va les découvrir un par un dans les prochains chapitres. L'important, c'est que ton projet tourne !

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.

Tu viens de...

Créer un projet Next.js, le lancer, et modifier ta première page. Félicitations, la route est lancée ! Dans le prochain chapitre, on va voir comment créer plein de pages et naviguer entre elles.