Installation et configuration de l'environnement de développement

À Quantum Metropolis, avant qu'un ingénieur puisse commencer à travailler sur les systèmes de la ville, il doit préparer son poste de travail quantique biométrique. De même, en tant que développeur Next.js, tu dois d'abord configurer ton environnement de développement. Dans ce module, tu apprendras à installer et configurer tous les outils nécessaires pour construire des applications avec Next.js 16.

Configuration système requise

Avant de commencer l'installation, assure-toi que ton ordinateur répond aux exigences minimales. Tout comme les terminaux quantiques de Quantum Metropolis nécessitent des spécifications énergétiques précises, l'environnement Next.js a besoin de versions logicielles appropriées :

• Node.js - version 20.9 ou plus récente (Next.js 16 ne prend plus en charge Node.js 18 ; choisis de préférence la version LTS actuelle)
• TypeScript (facultatif) - version 5.1 ou plus récente
• macOS, Windows (y compris WSL) ou Linux
• Minimum 1 Go de RAM (4 Go ou plus recommandés pour les projets plus importants)
• Éditeur de code - Visual Studio Code recommandé avec les extensions React/Next.js

Installer Node.js et npm

Node.js est comme le générateur d'énergie quantique de ton environnement de développement - il alimente tous les processus et outils.

Windows et macOS

1. Visite le site officiel de Node.js
2. Télécharge et installe la dernière version LTS (Long Term Support)
3. Vérifie l'installation en ouvrant un terminal et en tapant :

1node -v
2npm -v

Tu devrais voir les numéros de version de Node.js et de npm (Node Package Manager).

Linux (Ubuntu/Debian)

1# Les dépôts d'Ubuntu 22.04/24.04 et de Debian 12 fournissent un Node.js trop ancien (12 ou 18),
2# alors que Next.js 16 exige la version 20.9 ou plus récente. Installe la LTS actuelle depuis NodeSource :
3curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash -
4sudo apt install nodejs

Gérer les versions de Node.js

Pour les utilisateurs plus avancés, tout comme les ingénieurs de Quantum Metropolis utilisent des systèmes de virtualisation pour tester différentes configurations énergétiques, tu peux utiliser des outils pour gérer les versions de Node.js :

• nvm (Node Version Manager) pour macOS/Linux
• nvm-windows pour Windows

1# Installing nvm (macOS/Linux)
2curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
3
4# Installing a specific Node.js version
5nvm install 24
6nvm use 24

Installer un éditeur de code

À Quantum Metropolis, des éditeurs de code holographiques sont intégrés aux implants neuronaux des ingénieurs. Heureusement, dans notre monde, installer un bon éditeur de code sur ton ordinateur suffit. Visual Studio Code est actuellement l'un des éditeurs les plus populaires pour les développeurs Next.js.

1. Télécharge et installe Visual Studio Code
2. Installe des extensions utiles :
   • ES7+ React/Redux/React-Native snippets - modèles de code
   • ESLint - analyse statique du code
   • Prettier - formatage du code
   • Tailwind CSS IntelliSense (si tu prévois d'utiliser Tailwind CSS)
   • GitHub Copilot (optionnel) - assistant IA pour les développeurs

Créer un nouveau projet Next.js

Maintenant que tu as installé les outils nécessaires, tu peux créer ton premier projet Next.js 16. Vercel fournit un outil pratique, create-next-app, qui configure automatiquement le projet selon les bonnes pratiques.

1npx create-next-app@latest my-quantum-app

Pendant l'installation, on te demandera de répondre à plusieurs questions de configuration :

1Would you like to use the recommended Next.js defaults? No, customize settings
2Would you like to use TypeScript? Yes
3Which linter would you like to use? ESLint
4Would you like to use React Compiler? No
5Would you like to use Tailwind CSS? Yes
6Would you like your code inside a `src/` directory? Yes
7Would you like to use App Router? (recommended) Yes
8Would you like to customize the import alias (`@/*` by default)? No
9Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code? Yes

Dans Next.js 16, l'assistant commence par te demander si tu veux les réglages recommandés : la réponse « Yes, use recommended defaults » choisit d'un coup TypeScript, ESLint, Tailwind CSS, l'App Router et un fichier AGENTS.md. Nous choisissons « No, customize settings », car nous voulons aussi placer le code dans un répertoire src/. Nous laissons React Compiler, qui mémoïse automatiquement les composants, désactivé pour l'instant, et AGENTS.md est un fichier d'instructions pour les assistants IA qui les oriente vers la documentation correspondant à ta version installée de Next.js.

Nous te recommandons de répondre « Yes » à la plupart des questions, en particulier celles concernant TypeScript et l'App Router, qui sont essentiels pour les applications Next.js 16 modernes.

Une fois l'installation terminée, place-toi dans le répertoire du projet et démarre le serveur de développement :

1cd my-quantum-app
2npm run dev

Ton application devrait maintenant être disponible à l'adresse http://localhost:3000.

Méthodes d'installation alternatives

Yarn

Si tu préfères utiliser Yarn au lieu de npm :

1npm install -g yarn
2yarn create next-app my-quantum-app

pnpm

PNPM est un gestionnaire de paquets alternatif qui peut économiser de l'espace disque :

1npm install -g pnpm
2pnpm create next-app my-quantum-app

Configuration de TypeScript

TypeScript est comme le système de sécurité de Quantum Metropolis - il empêche les erreurs avant qu'elles ne surviennent. Next.js prend en charge TypeScript de manière native, et les dernières versions de create-next-app le configurent automatiquement. Si tu crées un projet manuellement, tu peux ajouter TypeScript plus tard :

1touch tsconfig.json
2npm run dev

Next.js détectera le fichier tsconfig.json, installera lui-même les dépendances manquantes (typescript, @types/react, @types/node) et complétera le fichier avec la configuration recommandée.

Structure d'un projet Next.js 16 avec App Router

Après avoir créé un nouveau projet, tu verras la structure de répertoires suivante :

1my-quantum-app/
2├── node_modules/      # Installed dependencies
3├── public/            # Static files (images, fonts)
4├── src/               # Application source code
5│   ├── app/           # App Router directory
6│   │   ├── layout.tsx # Main layout
7│   │   ├── page.tsx   # Home page
8│   │   └── globals.css # Global styles (Tailwind CSS 4 is configured here too)
9├── AGENTS.md          # Guidance for AI coding agents
10├── CLAUDE.md          # Points to AGENTS.md
11├── eslint.config.mjs  # ESLint configuration (flat config format)
12├── next-env.d.ts      # Next.js types for TypeScript
13├── next.config.ts     # Next.js configuration
14├── package.json       # Dependencies and scripts
15├── postcss.config.mjs # PostCSS configuration (Tailwind CSS plugin)
16└── tsconfig.json      # TypeScript configuration

Par rapport aux anciennes versions, le fichier tailwind.config.js a disparu : Tailwind CSS 4, qu'installe create-next-app, se configure directement dans globals.css. ESLint utilise le nouveau format eslint.config.mjs, et la configuration de Next.js est créée d'emblée en TypeScript sous le nom next.config.ts.

Configuration d'ESLint

ESLint est comme le système de surveillance de la qualité de l'air de Quantum Metropolis - il maintient la propreté et la qualité du code. create-next-app crée une configuration ESLint de base dans le fichier eslint.config.mjs (format flat config), et le script npm run lint lance simplement la commande eslint. Next.js 16 a supprimé l'ancienne commande next lint et ne vérifie plus le code pendant next build : c'est donc à toi de lancer le linter. Tu peux étendre la configuration, par exemple avec Prettier :

1npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Mets ensuite à jour le fichier eslint.config.mjs :

1// eslint.config.mjs
2import { defineConfig, globalIgnores } from 'eslint/config';
3import nextVitals from 'eslint-config-next/core-web-vitals';
4import nextTs from 'eslint-config-next/typescript';
5import prettierRecommended from 'eslint-plugin-prettier/recommended';
6
7const eslintConfig = defineConfig([
8  ...nextVitals,
9  ...nextTs,
10  {
11    rules: {
12      '@typescript-eslint/no-unused-vars': 'warn',
13    },
14  },
15  prettierRecommended,
16  globalIgnores(['.next/**', 'out/**', 'build/**', 'next-env.d.ts']),
17]);
18
19export default eslintConfig;

La configuration eslint-plugin-prettier/recommended active la règle prettier/prettier et désactive les règles ESLint qui entreraient en conflit avec le formatage de Prettier, c'est pourquoi elle se place vers la fin de la liste. Lance la vérification de tout le projet avec npm run lint.

Configuration de Prettier

Prettier est comme le système d'organisation automatique de l'espace de Quantum Metropolis - il maintient une apparence de code cohérente. Crée un fichier .prettierrc dans le répertoire du projet :

1{
2  "semi": true,
3  "trailingComma": "all",
4  "singleQuote": true,
5  "printWidth": 80,
6  "tabWidth": 2
7}

Configuration de VSCode pour le projet

Pour intégrer pleinement VS Code à ton projet, crée un répertoire .vscode à la racine du projet, puis un fichier settings.json à l'intérieur :

1{
2  "editor.formatOnSave": true,
3  "editor.defaultFormatter": "esbenp.prettier-vscode",
4  "editor.codeActionsOnSave": {
5    "source.fixAll.eslint": true
6  },
7  "typescript.tsdk": "node_modules/typescript/lib",
8  "typescript.enablePromptUseWorkspaceTsdk": true
9}

Configuration des variables d'environnement

À Quantum Metropolis, chaque système possède ses paramètres d'accès spéciaux. Dans Next.js, nous utilisons des variables d'environnement pour stocker des informations sensibles et des configurations propres à chaque environnement. Crée un fichier .env.local à la racine du projet :

1# Example environment variables
2DATABASE_URL=your_database_url
3API_KEY=your_api_key
4NEXT_PUBLIC_API_URL=https://api.example.com

Les variables avec le préfixe NEXT_PUBLIC_ seront également disponibles dans le navigateur.

Tester l'installation

Pour t'assurer que tout fonctionne correctement, modifie un peu de code dans le fichier src/app/page.tsx et vérifie si les changements sont visibles dans le navigateur. Si oui, ton environnement est correctement configuré !

Problèmes courants et solutions

Conflits de port

Si le port 3000 est déjà utilisé, tu peux lancer Next.js sur un autre port :

1npm run dev -- -p 3001

Problèmes de Node.js

Si tu rencontres des erreurs de compatibilité de version, assure-toi d'utiliser la version requise :

1node -v
2# If the version is too old, update Node.js or use nvm

Problèmes de TypeScript

Si tu rencontres des erreurs TypeScript, vérifie que tu as installé les types appropriés :

1npm install --save-dev @types/react @types/node

Configuration avancée

Pour des projets plus avancés, tout comme les systèmes avancés de Quantum Metropolis nécessitent une configuration supplémentaire, tu peux personnaliser ton environnement Next.js :

Ajouter des alias de chemin

Modifie tsconfig.json pour ajouter des alias de chemin :

1{
2  "compilerOptions": {
3    "baseUrl": ".",
4    "paths": {
5      "@/components/*": ["src/components/*"],
6      "@/lib/*": ["src/lib/*"],
7      "@/styles/*": ["src/styles/*"],
8      "@/utils/*": ["src/utils/*"]
9    }
10  }
11}

Configuration des tests

Ajoute Jest et React Testing Library au projet :

1npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Crée un fichier jest.config.js :

1const nextJest = require('next/jest');
2
3const createJestConfig = nextJest({
4  dir: './',
5});
6
7const customJestConfig = {
8  setupFilesAfterSetup: ['<rootDir>/jest.setup.js'],
9  testEnvironment: 'jest-environment-jsdom',
10};
11
12module.exports = createJestConfig(customJestConfig);

Crée ensuite un fichier jest.setup.js :

1import '@testing-library/jest-dom';

Résumé

Félicitations ! Comme un ingénieur de Quantum Metropolis qui a terminé la configuration de son poste de travail, tu disposes maintenant d'un environnement de développement entièrement configuré pour Next.js 16. Tes terminaux holographiques (l'éditeur de code) sont prêts, le réacteur quantique (Node.js) tourne, et les systèmes de sécurité (TypeScript, ESLint) sont actifs.

Dans la prochaine leçon, nous en apprendrons davantage sur l'initialisation des projets et les starters disponibles qui t'aideront à commencer plus rapidement à travailler sur des types d'applications spécifiques.

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4  <meta charset="UTF-8">
5  <title>Virtual DOM - Metropolis Quantum</title>
6  <style>
7    body {
8      font-family: 'Courier New', monospace;
9      background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
10      color: #64ffda;
11      padding: 20px;
12      margin: 0;
13    }
14    .container {
15      max-width: 800px;
16      margin: 0 auto;
17      background: rgba(255, 255, 255, 0.1);
18      padding: 20px;
19      border-radius: 10px;
20      border: 1px solid #64ffda;
21    }
22    h1 {
23      color: #64ffda;
24      text-align: center;
25    }
26    .comparison {
27      display: grid;
28      grid-template-columns: 1fr 1fr;
29      gap: 20px;
30      margin-top: 20px;
31    }
32    .method {
33      background: rgba(0, 0, 0, 0.5);
34      padding: 15px;
35      border-radius: 8px;
36      border: 2px solid #448aff;
37    }
38    .method h3 {
39      color: #448aff;
40      margin-top: 0;
41    }
42    .demo-box {
43      background: rgba(100, 255, 218, 0.1);
44      padding: 10px;
45      border-radius: 5px;
46      margin: 10px 0;
47      border: 1px solid #64ffda;
48    }
49    button {
50      background: linear-gradient(45deg, #7c4dff, #e91e63);
51      color: white;
52      border: none;
53      padding: 10px 20px;
54      border-radius: 5px;
55      cursor: pointer;
56      font-weight: bold;
57      margin: 5px;
58    }
59    button:hover {
60      transform: scale(1.05);
61      box-shadow: 0 5px 15px rgba(124, 77, 255, 0.4);
62    }
63  </style>
64</head>
65<body>
66  <div class="container">
67    <h1>Virtual DOM vs DOM réel</h1>
68
69    <div class="comparison">
70      <div class="method">
71        <h3>Manipulation traditionnelle du DOM</h3>
72        <div id="traditional-demo" class="demo-box">
73          Compteur : <span id="trad-count">0</span>
74        </div>
75        <button onclick="traditionalUpdate()">Mettre à jour (lent)</button>
76        <p>Chaque changement → re-rendu de toute la page</p>
77      </div>
78
79      <div class="method">
80        <h3>Virtual DOM (méthode React)</h3>
81        <div id="virtual-demo" class="demo-box">
82          Compteur : <span id="virt-count">0</span>
83        </div>
84        <button onclick="virtualUpdate()">Mettre à jour (rapide)</button>
85        <p>Changement → Diff → seulement les mises à jour nécessaires</p>
86      </div>
87    </div>
88
89    <div style="margin-top: 30px; background: rgba(124, 77, 255, 0.2); padding: 15px; border-radius: 8px;">
90      <h3>Comment fonctionne le Virtual DOM ?</h3>
91      <ol style="line-height: 1.8;">
92        <li>React crée une représentation virtuelle du DOM en mémoire</li>
93        <li>Lors d'un changement d'état - crée un nouveau Virtual DOM</li>
94        <li>Compare (diffing) l'ancien et le nouveau Virtual DOM</li>
95        <li>Met à jour uniquement les parties modifiées dans le DOM réel</li>
96        <li>Résultat : des applications plus rapides et plus efficaces !</li>
97      </ol>
98    </div>
99  </div>
100
101  <script>
102    let tradCount = 0;
103    let virtCount = 0;
104
105    // DOM traditionnel - méthode plus lente
106    function traditionalUpdate() {
107      tradCount++;
108      console.log("Mise à jour traditionnelle - tout l'élément est re-rendu");
109      document.getElementById('trad-count').textContent = tradCount;
110      // Simulation d'une opération plus lente
111      document.getElementById('traditional-demo').style.background = 'rgba(244, 67, 54, 0.3)';
112      setTimeout(() => {
113        document.getElementById('traditional-demo').style.background = 'rgba(100, 255, 218, 0.1)';
114      }, 200);
115    }
116
117    // Simulation du Virtual DOM - méthode plus rapide
118    function virtualUpdate() {
119      virtCount++;
120      console.log("Mise à jour du Virtual DOM - seulement les changements nécessaires");
121      document.getElementById('virt-count').textContent = virtCount;
122      // Simulation d'une opération plus rapide
123      document.getElementById('virtual-demo').style.background = 'rgba(76, 175, 80, 0.3)';
124      setTimeout(() => {
125        document.getElementById('virtual-demo').style.background = 'rgba(100, 255, 218, 0.1)';
126      }, 100);
127    }
128
129    console.log("Démo du Virtual DOM - Metropolis Quantum");
130    console.log("Clique sur les boutons pour voir la différence en action !");
131  </script>
132</body>
133</html>