Démarrez un projet Next.js

Découvrez Next.js

Grâce au cours Débutez avec React, vous maîtrisez les concepts fondamentaux de React: les composants, les hooks comme useState et useEffect. Vous savez créer des applications interactives et dynamiques.

Mais vous avez peut-être remarqué certaines limitations quand vous avez déployé vos projets React :

• Le SEO n'est pas optimal : les moteurs de recherche ont du mal à indexer votre contenu car tout est généré côté client

• La première page met du temps à s'afficher : le navigateur doit d'abord télécharger tout le JavaScript, puis exécuter React, et enfin afficher le contenu

• Vous devez gérer le routing manuellement : installer React Router, configurer les routes, gérer les erreurs 404...

• Pas de backend intégré : si vous voulez une API, il faut créer un serveur Node.js séparé

C'est exactement là que Next.js entre en jeu ! 

Next.js est un framework basé sur React qui ajoute des fonctionnalités puissantes pour créer des applications web modernes et performantes. 

Dites-vous que Next.js est un React avec des "super-pouvoirs" voici les différences entre Next.JS et React seul :

Imaginez : vous construisez une maison :

• Avec React seul, vous avez des briques (les composants) et du ciment (les hooks), mais vous devez tout construire vous-même : les fondations, la plomberie, l'électricité...

• Avec Next.js, vous avez les mêmes briques, mais aussi des murs préfabriqués, une plomberie déjà installée, et l'électricité raccordée. Vous pouvez vous concentrer sur la décoration et l'aménagement !

La grande différence avec React, c'est que Next.js peut générer le HTML de vos pages côté serveur, avant de l'envoyer au navigateur :

Pour notre portfolio, Next.js est le choix parfait ! Un portfolio doit être :

• Trouvable : les recruteurs doivent pouvoir vous découvrir via Google

• Rapide : la première impression compte

• Professionnel : montrer que vous maîtrisez les technologies modernes

Créez votre premier projet Next.js

Assez de théorie, passons à la pratique ! Nous allons créer le projet qui deviendra votre portfolio professionnel. Ouvrez votre terminal et tapez :

npx create-next-app@latest mon-portfolio 

Vous aurez ensuite des questions de configuration à repondre. Pour le cours nous suivrons cette configuration :

✔ Would you like to use the recommended Next.js defaults? > No
✔ Would you like to use TypeScript? > No
✔ Which linter would you like to use? > ESLint
✔ Would you like to use React Compiler? > No
✔ Would you like to use Tailwind CSS? > No
✔ Would you like your code inside a `src/` directory? > No
✔ Would you like to use App Router?(recommended) > Yes
✔ Would you like to customize the import alias(`@/*`bydefault)? > No

• No defaults : Afin de pouvoir personnaliser la structure du projet pour notre cours

• No TypeScript : on reste sur JavaScript pour ce cours, comme pour React

• ESLint : pour détecter les erreurs automatiquement

• No React Compiler : c'est expérimental et pas nécessaire pour débuter (on apprendra les optimisations manuellement plus tard si besoin)

• No Tailwind : on va utiliser CSS Modules comme avec React

• No src/ : structure plus simple pour débuter

• Yes App Router : c'est la nouvelle façon moderne de faire avec Next.js

• No custom alias : restons simples avec les imports standards

Une fois l'installation terminée :

cd mon-portfolio
npm run dev

Ouvrez votre navigateur à l'adresse  http://localhost:3000  et vous devriez voir une page de bienvenue Next.js !

Explorez la structure du projet

Ouvrez votre projet dans VS Code et observez la structure :

mon-portfolio/
├──  app/                    ← Le cœur de votre application !
│   ├──  favicon.ico        ← L'icône du site
│   ├──  globals.css        ← Styles globaux
│   ├──  layout.js          ← Layout principal (enveloppe toutes les pages)
│   └──  page.js            ← Votre page d'accueil
├──  public/                 ← Images et fichiers statiques
├──  node_modules/           ← Dépendances (comme avec React)
├──  eslint.config.mjs        ← Configuration ESLint
├──  jsconfig.json       ← Configuration
├──  next.config.mjs        ← Configuration Next.js
├──  package.json          ← Dépendances et scripts
└──  README.md             ← Documentation

Le dossier app/ est le dossier clé ! C'est là que vivra toute votre application.

La page d’accueil :  app/page.js

Ouvrons le fichier  app/page.js  . C'est votre page d'accueil :

export default function Home() {
  return (
    <div className={styles.page}>
      // …… le contenu de la page
    </div>
  )
}

Vous reconnaissez ? C'est du React pur ! Un composant fonction qui retourne du JSX. Next.js, c'est vraiment React avec des super-pouvoirs.

Modifiez ce fichier :

export default function Home() {
  return (
    <div>
      <h1>Bienvenue sur mon portfolio</h1>
      <p>En construction avec Next.js 🚀</p>
    </div>
  )
}

Sauvegardez, et regardez votre navigateur : la page se met à jour instantanément ! Le Hot Module Replacement fonctionne comme avec Vite.

Le Layout : l'enveloppe de votre site

Ouvrez maintenant  app/layout.js  :

import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  );
}

Ce fichier est spécial : c'est le "wrapper" ou conteneur qui enveloppe toutes vos pages.

Notez deux choses importantes :

1. export const metadata: c'est ici que vous définissez le titre et la description de votre site (important pour le SEO !)

2. {children}: c'est ici que vos pages (comme page.js) seront injectées

Pensez au Layout comme à la structure d'un document HTML :

<html>           ← Défini dans layout.js
  <body>         ← Défini dans layout.js
    {children}   ← Vos pages (page.js) s'affichent ici
  </body>
</html>

Personnalisez votre Layout

Modifions le layout pour notre portfolio :

import "./globals.css"

export const metadata = {
  title: "Portfolio de Prénom Nom",
  description: "Développeur web passionné par React et Next.js",
}

export default function RootLayout({ children }) {
  return (
    <html lang="fr">
      <body>
        <main>{children}</main>
      </body>
    </html>
  )
}

Changements apportés :

• lang="fr": notre site est en français

• Metadata personnalisés pour le SEO

• Ajout d'une balise <main> pour la sémantique HTML

Créez votre Hero Section

Maintenant que vous comprenez la structure, construisons la première partie de votre portfolio : la Hero Section ! C'est la première chose que les visiteurs verront en arrivant sur votre site.

Nettoyez le CSS global

Ouvrez  app/globals.css  et supprimez tout le contenu. Remplacez-le par ceci :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fafafa;
}

main {
  min-height: 100vh;
}

Un reset CSS simple et efficace !

Créez la structure de la Hero Section

Modifiez  app/page.js  :

export default function Home() {
  return (
    <div className={styles.hero}>
      <div className={styles.heroContent}>
        <h1 className={styles.heroTitle}>
          Bonjour, je suis <span className={styles.highlight}>Prénom Nom</span>
        </h1>
        <p className={styles.heroSubtitle}>
          Développeur Web Full-Stack
        </p>
        <p className={styles.heroDescription}>
          Je crée des applications web modernes, performantes et accessibles
          avec React, Next.js et Node.js.
        </p>
        <div className={styles.heroButtons}>
          <a href="#projects" className={`${styles.btn} ${styles.btnPrimary}`}>
            Voir mes projets
          </a>
          <a href="#contact" className={`${styles.btn} ${styles.btnSecondary}`}>
            Me contacter
          </a>
        </div>
      </div>
    </div>
  )
}

• Une <div className={styles.hero}> qui contient toute la section

• Un titre avec votre nom en surbrillance

• Votre titre professionnel (Développeur Web Full-Stack)

• Une courte description de ce que vous faites

• Deux boutons d'action (Call To Action ou CTA)

Créez le fichier de styles

Ici, on utilise les CSS Modules (exactement comme avec React/Vite).

Sauvegardez tous vos fichiers et regardez votre navigateur. Vous devriez voir une hero section avec :

• Un dégradé violet/rose en fond

• Votre nom en grand avec une couleur dorée

• Deux beaux boutons avec des effets au survol

• Un design responsive qui s'adapte aux mobiles

Comprenez ce qui se passe sous le capot

Avant de terminer ce chapitre, prenons un moment pour comprendre la magie de Next.js.

Inspectez le HTML généré

Faites un clic droit sur votre page → "Afficher le code source de la page" (ou Ctrl+U). Que voyez-vous ?

Du HTML complet avec tout votre contenu ! Voici un extrait :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8"/>
  <title>Portfolio de Prénom Nom</title>
  <meta name="description" content="Développeur web passionné..."/>
</head>
<body>
  <main>
    <div class="hero_hero__...">
      <div class="hero_heroContent__...">
        <h1 class="hero_heroTitle__...">
          Bonjour, je suis <span class="hero_highlight__...">Prénom Nom</span>
        </h1>
        <!-- Tout votre contenu est là ! -->
      </div>
    </div>
  </main>
</body>
</html>

Comparez avec un projet React/Vite classique (faites le test si vous avez un ancien projet) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Vite + React</title>
</head>
<body>
  <div id="root"></div>
  <!-- Vide ! Tout sera généré par JavaScript -->
  <script type="module" src="/src/main.jsx"></script>
</body>
</html>

Vous voyez la différence ?

• React/Vite : HTML vide, tout est généré côté client par JavaScript

• Next.js : HTML complet déjà prêt, généré côté serveur

Le processus de rendu Next.js

Voici ce qui se passe quand quelqu'un visite votre portfolio :

1. Requête →  http://localhost:3000/

   ↓

2. Next.js côté serveur :

   - Exécute votre composant Home()

   - Génère le HTML complet

   - Ajoute les styles CSS

   ↓

3. Réponse → HTML complet + CSS + JavaScript

   ↓

4. Navigateur :

   - Affiche le HTML immédiatement (ultra rapide !)

   - Télécharge React et votre code JavaScript

   - "Hydrate" la page (la rend interactive)

   ↓

5. Page prête : rapide + SEO + interactive !

C'est ce qu'on appelle le Server-Side Rendering (SSR).

À vous de jouer !

Avant de passer au chapitre suivant, entraînez-vous :

Créez un composant Tags.js dans un dossier components qui vous permettra d’afficher les technologies que vous utilisez sous forme de bulles. 

Créez un tableau avec la liste des technologies que vous utilisez dans page.js et appelez votre composant dans une boucle. 

 En résumé

• Utilisez Next.js pour améliorer le SEO, la rapidité d’affichage et bénéficier d’un routing automatique et d’un backend intégré.

• Installez votre projet avec npx create-next-app@latest mon-portfolio en choisissant les options recommandées pour ce cours.

• Comprenez la structure du projet : le dossier app/contient les pages, le layout, les styles globaux, sans besoin de fichier index.html.

• Créez une Hero Section attractive avec JSX et CSS Modules pour mettre en valeur votre nom, votre métier et deux boutons d’action.

• Profitez du Server-Side Rendering de Next.js : vos pages sont générées côté serveur, optimisant le SEO et l'expérience utilisateur.

…