🚀 Installation et configuration d’un projet Next.js (create-next-app)

Next.js est un framework basé sur React qui permet de créer des applications modernes et performantes avec un rendu hybride (SSR, SSG, ISR, CSR). L’installation est simple grâce à l’outil create-next-app.

📌 1. Installer un projet Next.js

La manière la plus simple de démarrer est d’utiliser la commande suivante :

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

Ou avec Yarn :

yarn create next-app my-next-app

Ou avec pnpm :

pnpm create next-app my-next-app

🔹 Options disponibles (demandées lors de l’installation) :

• TypeScript : ✅ ou ❌
• ESLint : ✅ ou ❌
• Tailwind CSS : ✅ ou ❌
• src/ directory : ✅ ou ❌
• App Router (app/) : ✅ ou ❌
• Import alias (@/*) : ✅ ou ❌

💡 Recommandé : Activer TypeScript, ESLint, Tailwind CSS et App Router (app/) pour tirer parti des dernières fonctionnalités.

📂 2. Structure du projet

Après l’installation, on obtient une structure comme celle-ci :

my-next-app/
├── app/                   # Nouveau système de routing basé sur les dossiers
│   ├── layout.tsx         # Layout global
│   ├── page.tsx           # Page d'accueil "/"
│   ├── about/             # Dossier pour la page "/about"
│   │   ├── page.tsx       # Page about
│   ├── api/               # API Routes (si nécessaire)
│   ├── loading.tsx        # Indicateur de chargement (optionnel)
│   ├── error.tsx          # Gestion des erreurs (optionnel)
├── public/                # Fichiers statiques (images, favicon...)
├── styles/                # Styles globaux (CSS, Tailwind...)
├── next.config.js         # Configuration Next.js
├── package.json           # Dépendances et scripts
├── tsconfig.json          # Config TypeScript (si activé)

🚀 3. Lancer le serveur de développement

Une fois le projet installé, allez dans le dossier :

cd my-next-app

Et démarrez le serveur :

npm run dev  # ou npm run dev / pnpm dev

pnpm run dev # ou yarn dev / pnpm dev

yarn dev # ou yarn dev / pnpm dev

bun run dev # ou yarn dev / pnpm dev

📍 L’application est accessible sur :
👉 http://localhost:3000

⚙️ 4. Configurer le projet (next.config.js)

Le fichier next.config.js permet d’activer certaines options avancées :

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true, // Active le mode strict React
  swcMinify: true, // Optimisation des performances
  images: {
    domains: ["example.com"], // Autoriser des domaines pour les images
  },
  experimental: {
    serverActions: true, // Activer les Server Actions
  },
};
 
module.exports = nextConfig;

📌 5. Déploiement sur Vercel (Facultatif)

Vercel est la plateforme idéale pour héberger une application Next.js.

1️⃣ Installer Vercel CLI

npm install -g vercel

2️⃣ Se connecter à Vercel

vercel login

3️⃣ Déployer l’application

vercel

🎯 Conclusion

🚀 Next.js permet d’installer rapidement un projet prêt à l’emploi avec une configuration optimisée. Grâce au App Router (app/), au support de TypeScript et aux Server Components, le développement est plus performant et plus flexible.