Initialisation du projet et starters disponibles

À Quantum Metropolis, les ingénieurs utilisent souvent des schémas quantiques prédéfinis pour accélérer le développement de nouveaux systèmes urbains. De même, dans le monde de Next.js, nous pouvons utiliser différents modèles de starters et configurations qui nous permettent de commencer plus rapidement à travailler sur une nouvelle application. Dans ce module, nous explorerons les starters disponibles pour Next.js 16 et apprendrons à initialiser efficacement de nouveaux projets.

Initialisation de base d'un projet

Comme nous le savons déjà grâce à la leçon précédente, la façon la plus simple de démarrer un nouveau projet Next.js est d'utiliser l'outil create-next-app :

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

Cette commande crée un nouveau projet Next.js avec la configuration par défaut. C'est comme lancer un module résidentiel de base à Quantum Metropolis - fonctionnel, mais que tu voudras peut-être adapter à tes besoins spécifiques.

Options de configuration de create-next-app

Lors de la création d'un nouveau projet, create-next-app te demande d'abord si tu veux utiliser les réglages recommandés (TypeScript, ESLint, Tailwind CSS, App Router et AGENTS.md). Si tu choisis tes propres réglages, d'autres questions suivent. Examinons-les de plus près :

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

TypeScript

TypeScript ajoute le typage statique à JavaScript, ce qui aide à détecter les erreurs pendant l'écriture du code. À Quantum Metropolis, cela ressemblerait aux systèmes d'alerte précoce qui détectent les problèmes avant qu'ils ne deviennent critiques.

1// JavaScript
2function addEnergy(reactor, amount) {
3  return reactor.level + amount;
4}
5
6// TypeScript
7interface Reactor {
8  level: number;
9  maxCapacity: number;
10  status: 'active' | 'inactive' | 'maintenance';
11}
12
13function addEnergy(reactor: Reactor, amount: number): number {
14  if (reactor.status !== 'active') {
15    throw new Error('Reactor must be active to add energy');
16  }
17  return reactor.level + amount;
18}

ESLint

ESLint est un outil d'analyse statique du code qui aide à maintenir un style cohérent et à détecter les problèmes potentiels. C'est comme un contrôleur qualité automatique dans les usines de Quantum Metropolis. Dans Next.js 16, l'assistant te permet aussi de choisir Biome à sa place, un linter et formateur rapide réunis dans un seul outil, ou de te passer de linter.

React Compiler

React Compiler mémoïse automatiquement les composants, tu as donc moins souvent besoin de useMemo et useCallback écrits à la main. Dans Next.js 16, sa prise en charge est stable mais désactivée par défaut, car elle rallonge la compilation ; pour commencer, tu peux répondre « No ».

Tailwind CSS

Tailwind CSS est un framework CSS basé sur des classes utilitaires. Au lieu d'écrire tes propres styles CSS, tu utilises des classes prédéfinies directement dans le HTML. C'est comme le système de construction modulaire de Quantum Metropolis - au lieu de concevoir chaque bâtiment de zéro, les ingénieurs assemblent des modules tout prêts.

1// Without Tailwind
2<button className="login-button">Log in</button>
3
4// With Tailwind
5<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
6  Log in
7</button>

Le répertoire src/

Utiliser le répertoire src/ est une bonne pratique d'organisation qui sépare le code source des fichiers de configuration. C'est comme séparer le centre de gestion de l'infrastructure à Quantum Metropolis.

App Router

L'App Router est une approche moderne du routage dans Next.js, basée sur les React Server Components. C'est une fonctionnalité clé de Next.js 16, que nous recommandons vivement d'utiliser dans les nouveaux projets.

L'alias d'import @/*

L'alias d'import @/* te permet d'utiliser un chemin raccourci pour importer des modules depuis le dossier src/ (depuis la racine dans un projet sans src/). C'est comme le système de transport rapide de Quantum Metropolis - un raccourci qui fait gagner du temps.

1// Without alias
2import { Button } from '../../../components/ui/Button';
3
4// With alias @/*
5import { Button } from '@/components/ui/Button';

AGENTS.md

La dernière question concerne un fichier AGENTS.md contenant des instructions pour les assistants IA comme Claude ou Cursor. Ce fichier les oriente vers la documentation fournie avec ta version installée de Next.js, afin que le code qu'ils proposent corresponde à ton projet et non à d'anciennes versions du framework.

Modèles de starters officiels

Next.js propose plusieurs modèles de starters officiels que tu peux utiliser comme base pour ton projet. Pour les utiliser, recours au flag --example :

1npx create-next-app@latest my-quantum-blog --example blog-starter

Voici quelques-uns des modèles officiels les plus populaires :

1. Tailwind CSS sans modèle

L'exemple with-tailwindcss n'existe plus dans le dépôt Next.js : create-next-app installe lui-même Tailwind CSS (dans les réglages recommandés ou avec le flag --tailwind).

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

2. with-typescript

Un modèle avec TypeScript déjà configuré.

1npx create-next-app@latest --example with-typescript my-ts-app

3. blog-starter

Un modèle de blog Markdown, prêt à l'emploi.

1npx create-next-app@latest --example blog-starter my-blog

4. Next.js Commerce

Une boutique e-commerce complète sur l'App Router, développée dans son propre dépôt, vercel/commerce.

1npx create-next-app@latest --example https://github.com/vercel/commerce my-store

Templates Next.js - starters avancés

Vercel, l'entreprise derrière Next.js, propose aussi des templates plus avancés sur vercel.com/templates. Ce sont des projets tout prêts pour des cas d'usage spécifiques. Cela ressemble à la façon dont les architectes de Quantum Metropolis peuvent choisir des plans tout faits pour différents types de structures urbaines.

Quelques templates remarquables :

Chatbot (anciennement Next.js AI Chatbot)

Un chatbot IA similaire à ChatGPT, construit avec Next.js et l'AI SDK ; il connecte les modèles (par exemple OpenAI, Anthropic, Google, xAI) via Vercel AI Gateway.

1npx create-next-app@latest ai-chatbot \
2  --use-pnpm \
3  --example "https://github.com/vercel/chatbot"

Next.js + Supabase

Un starter Next.js avec Supabase : connexion avec Supabase Auth et session dans les cookies, Tailwind CSS et composants shadcn/ui.

1npx create-next-app@latest supabase-app \
2  --use-pnpm \
3  --example "https://github.com/vercel/next.js/tree/canary/examples/with-supabase"

Starters communautaires

En plus des templates officiels, la communauté Next.js a créé de nombreux starters. Ce sont comme des projets architecturaux expérimentaux à Quantum Metropolis - ils ne font pas partie de l'infrastructure officielle, mais peuvent proposer des solutions innovantes.

T3 Stack

Le T3 Stack est une boîte à outils populaire pour construire des applications Next.js avec TypeScript, tRPC, Tailwind CSS et Prisma.

1npm create t3-app@latest

Next.js Nextra

Nextra est un framework pour créer des sites statiques et de la documentation basés sur Next.js.

1npx create-next-app@latest my-docs-site \
2  --use-pnpm \
3  --example "https://github.com/shuding/nextra-docs-template"

Structure du projet après l'initialisation

Après avoir initialisé un projet Next.js 16 avec App Router, tu verras la structure de fichiers suivante :

1my-quantum-project/
2├── src/                 # Application source code
3│   └── app/             # App Router directory
4│       ├── favicon.ico  # Page icon
5│       ├── globals.css  # Global CSS styles
6│       ├── layout.tsx   # Main application layout
7│       └── page.tsx     # Home page
8├── public/              # Static files
9│   └── next.svg         # Next.js logo
10├── AGENTS.md            # Guidance for AI coding agents
11├── CLAUDE.md            # Points to AGENTS.md
12├── eslint.config.mjs    # ESLint configuration
13├── next.config.ts       # Next.js configuration
14├── package.json         # Dependencies and scripts
15├── postcss.config.mjs   # PostCSS configuration (Tailwind CSS 4)
16└── tsconfig.json        # TypeScript configuration

Examinons de plus près certains de ces fichiers :

src/app/page.tsx

C'est la page principale de ton application, accessible à /.

1export default function Home() {
2  return (
3    <main className="flex min-h-screen flex-col items-center justify-between p-24">
4      <h1 className="text-4xl font-bold">Welcome to Quantum Metropolis</h1>
5      <p className="text-xl">The future starts here.</p>
6    </main>
7  );
8}

src/app/layout.tsx

Ce fichier définit le layout qui sera partagé par toutes les pages de ton application.

1import './globals.css';
2import type { Metadata } from 'next';
3
4export const metadata: Metadata = {
5  title: 'Quantum Metropolis',
6  description: 'Management portal for the city of the future systems',
7};
8
9export default function RootLayout({
10  children,
11}: {
12  children: React.ReactNode;
13}) {
14  return (
15    <html lang="en">
16      <body>{children}</body>
17    </html>
18  );
19}

next.config.ts

Ce fichier contient la configuration de Next.js ; create-next-app le crée directement en TypeScript. Tu peux l'étendre avec tes propres réglages, par exemple la liste des serveurs depuis lesquels les images peuvent être chargées :

1import type { NextConfig } from 'next';
2
3const nextConfig: NextConfig = {
4  // Your configurations
5  images: {
6    remotePatterns: [
7      { protocol: 'https', hostname: 'quantum-metropolis.example.com' },
8    ],
9  },
10};
11
12export default nextConfig;

L'option remotePatterns a remplacé l'ancienne images.domains, dépréciée dans Next.js 16. Les motifs permettent de préciser exactement le protocole et l'adresse du serveur, ce qui les rend plus sûrs.

Modifier un projet existant

Après avoir initialisé un projet, tu voudras généralement l'adapter à tes besoins. Voici quelques changements typiques :

1. Mettre à jour les métadonnées

Mets à jour le fichier src/app/layout.tsx pour changer le titre et la description de l'application :

1export const metadata: Metadata = {
2  title: 'Quantum Metropolis Management System',
3  description: 'Advanced interface for monitoring and controlling city systems',
4};

2. Ajouter des dépendances

Installe les bibliothèques supplémentaires dont tu as besoin :

1npm install axios @tanstack/react-query zustand

3. Configurer la structure des dossiers

Crée des dossiers pour les éléments typiques de l'application :

1mkdir -p src/components/ui
2mkdir -p src/lib
3mkdir -p src/hooks
4mkdir -p src/utils

4. Personnaliser les styles

Si tu utilises Tailwind CSS 4, qu'installe create-next-app, tu personnalises le thème directement dans le fichier globals.css avec la directive @theme :

1/* src/app/globals.css */
2@import "tailwindcss";
3
4@theme {
5  --color-quantum-primary: #3B82F6;
6  --color-quantum-secondary: #10B981;
7  --color-quantum-accent: #8B5CF6;
8  --color-quantum-dark: #1F2937;
9  --font-sans: "Inter", sans-serif;
10  --font-mono: "Fira Code", monospace;
11}

Chaque variable préfixée par --color- crée de nouvelles classes, par exemple bg-quantum-primary ou text-quantum-accent, et --font-sans change la police utilisée par la classe font-sans. Dans l'ancien Tailwind CSS 3, ces mêmes réglages allaient dans un fichier tailwind.config.ts, que tu rencontreras encore dans de nombreux projets existants :

1import type { Config } from 'tailwindcss';
2
3const config: Config = {
4  content: [
5    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
6    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
7    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
8  ],
9  theme: {
10    extend: {
11      colors: {
12        quantum: {
13          primary: '#3B82F6',
14          secondary: '#10B981',
15          accent: '#8B5CF6',
16          dark: '#1F2937',
17        },
18      },
19      fontFamily: {
20        sans: ['Inter', 'sans-serif'],
21        mono: ['Fira Code', 'monospace'],
22      },
23    },
24  },
25  plugins: [],
26};
27export default config;

Dans un nouveau projet Next.js 16 avec Tailwind CSS 4, ce fichier n'est pas nécessaire, alors ne le crée pas sans raison.

Configuration de Git et .gitignore

Quand tu initialises un projet avec create-next-app, git est automatiquement initialisé et un fichier .gitignore est créé. C'est comme le système de contrôle et d'archivage des plans à Quantum Metropolis - il te permet de suivre les changements et de collaborer avec d'autres ingénieurs.

create-next-app crée aussi le premier commit (« Initial commit from Create Next App »). Enregistre tes propres modifications avec le suivant :

1git add .
2git commit -m "Initialize Next.js 16 project"

Personnaliser les scripts npm

Tu peux personnaliser les scripts du fichier package.json pour simplifier les tâches fréquentes :

1"scripts": {
2  "dev": "next dev",
3  "build": "next build",
4  "start": "next start",
5  "lint": "eslint",
6  "format": "prettier --write \"**/*.{js,ts,tsx,md}\"",
7  "update-deps": "npm update"
8}

Remarque le script lint : dans Next.js 16, il lance directement eslint, car l'ancienne commande next lint a été supprimée. Les scripts dev et build n'ont besoin d'aucun flag, puisque Turbopack est désormais le bundler par défaut.

Résumé

Initialiser un projet Next.js 16 et choisir le bon starter est le fondement du succès de ton application, tout comme des fondations solides sont essentielles pour chaque bâtiment de Quantum Metropolis. Dans ce module, nous avons exploré différentes options d'initialisation de projet, du create-next-app de base aux templates communautaires avancés.

Le choix du bon starter dépend de tes besoins spécifiques. Pour les projets plus simples, le template par défaut de create-next-app peut suffire. Pour des applications plus complexes, envisage d'utiliser l'un des templates officiels ou des solutions communautaires.

Souviens-toi qu'un bon démarrage de projet bien organisé te fera gagner beaucoup de temps et t'évitera des problèmes à l'avenir, tout comme une planification soignée de l'infrastructure urbaine de Quantum Metropolis prévient les problèmes lors de son expansion.

Dans la prochaine leçon, nous nous plongerons dans la structure des répertoires et des fichiers de Next.js, en comparant le nouvel App Router avec le Pages Router traditionnel.

1// JSX et composants - Metropolis Quantum
2import React from 'react';
3
4console.log("JSX et composants dans React");
5console.log("Construction de l'interface de Quantum City\n");
6
7// ==========================================
8// 1. Qu'est-ce que le JSX ?
9// ==========================================
10console.log("=== 1. JSX (JavaScript XML) ===");
11
12// Le JSX est une extension de la syntaxe JavaScript
13// Il permet d'écrire du code proche du HTML dans JavaScript
14const quantumTitle = <h1>Metropolis Quantum</h1>;
15
16console.log("Élément JSX :", quantumTitle);
17
18// JSX avec des expressions JavaScript
19const cityName = "Quantum City";
20const population = 2470000;
21
22const cityInfo = (
23  <div>
24    <h2>Bienvenue à {cityName} !</h2>
25    <p>Population : {population.toLocaleString()} habitants</p>
26    <p>Statut : {population > 2000000 ? "Mégapole" : "Ville"}</p>
27  </div>
28);
29
30// ==========================================
31// 2. Composants fonctionnels
32// ==========================================
33console.log("\n=== 2. Composants fonctionnels ===");
34
35// Composant simple
36function WelcomeMessage() {
37  return (
38    <div style={{
39      background: 'linear-gradient(45deg, #7c4dff, #64ffda)',
40      padding: '20px',
41      borderRadius: '10px',
42      color: 'white',
43      textAlign: 'center'
44    }}>
45      <h2>Bienvenue dans le futur !</h2>
46      <p>Metropolis Quantum - la ville de la technologie</p>
47    </div>
48  );
49}
50
51// Composant avec props
52interface BuildingCardProps {
53  name: string;
54  height: number;
55  type: 'residential' | 'commercial' | 'industrial';
56  lights: boolean;
57}
58
59const BuildingCard: React.FC<BuildingCardProps> = ({ name, height, type, lights }) => {
60  const getTypeIcon = () => {
61    switch(type) {
62      case 'residential': return '●';
63      case 'commercial': return '■';
64      case 'industrial': return '▲';
65      default: return '□';
66    }
67  };
68
69  const getTypeColor = () => {
70    switch(type) {
71      case 'residential': return '#4caf50';
72      case 'commercial': return '#2196f3';
73      case 'industrial': return '#ff9800';
74      default: return '#9e9e9e';
75    }
76  };
77
78  return (
79    <div style={{
80      background: 'rgba(255, 255, 255, 0.1)',
81      padding: '15px',
82      borderRadius: '8px',
83      border: `2px solid ${getTypeColor()}`,
84      marginBottom: '10px'
85    }}>
86      <h3 style={{ color: getTypeColor() }}>
87        {getTypeIcon()} {name}
88      </h3>
89      <p>Hauteur : {height}m</p>
90      <p>Type : {type}</p>
91      <p>État des lumières : {lights ? 'Allumées' : 'Éteintes'}</p>
92    </div>
93  );
94};
95
96// ==========================================
97// 3. Composition de composants
98// ==========================================
99console.log("\n=== 3. Composition de composants ===");
100
101function CityDashboard() {
102  const buildings = [
103    { id: 1, name: 'Quantum Tower', height: 850, type: 'commercial' as const, lights: true },
104    { id: 2, name: 'Neural Apartments', height: 450, type: 'residential' as const, lights: true },
105    { id: 3, name: 'Cyber Factory', height: 320, type: 'industrial' as const, lights: false }
106  ];
107
108  return (
109    <div style={{
110      padding: '20px',
111      background: 'linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%)',
112      minHeight: '100vh',
113      color: 'white'
114    }}>
115      <WelcomeMessage />
116
117      <div style={{ marginTop: '30px' }}>
118        <h2 style={{ color: '#64ffda' }}>Bâtiments de la Metropolis</h2>
119        {buildings.map(building => (
120          <BuildingCard
121            key={building.id}
122            name={building.name}
123            height={building.height}
124            type={building.type}
125            lights={building.lights}
126          />
127        ))}
128      </div>
129
130      <div style={{
131        marginTop: '30px',
132        background: 'rgba(124, 77, 255, 0.2)',
133        padding: '15px',
134        borderRadius: '8px',
135        borderLeft: '4px solid #7c4dff'
136      }}>
137        <h3>Astuces JSX :</h3>
138        <ul style={{ lineHeight: '1.8' }}>
139          <li>Le JSX n'est pas une chaîne, pas du HTML - c'est du JavaScript !</li>
140          <li>Utilise {} pour les expressions JavaScript</li>
141          <li>className au lieu de class (mot-clé JS)</li>
142          <li>camelCase pour les attributs (onClick, onChange)</li>
143          <li>Chaque élément doit être fermé</li>
144        </ul>
145      </div>
146    </div>
147  );
148}
149
150// Rendu de l'application
151function App() {
152  console.log("Rendu de CityDashboard...");
153  return <CityDashboard />;
154}
155
156export default App;