Créer un site Next.js de Zéro : Guide Complet

Next.js est le framework React le plus populaire pour créer des applications web modernes. Dans ce tutoriel complet, nous allons construire un site de A à Z, couvrir les concepts fondamentaux et le déployer en production.

1. Initialiser le projet

La commande create-next-app génère une structure de projet complète. Choisissez les options recommandées : TypeScript, ESLint, Tailwind CSS et App Router sont alors préconfigurés.

1. 1

   Créer le projet

   Ouvrez un terminal et lancez la commande suivante :

   bash

   Copier

   npx create-next-app@latest mon-site
   cd mon-site

2. 2

   Lancer le serveur de développement

   Depuis Next.js 16, le serveur de développement utilise Turbopack par défaut : il démarre en quelques secondes et chaque modification se reflète instantanément dans le navigateur.

   bash

   Copier

   npm run dev

3. 3

   Ouvrir dans le navigateur

   Rendez-vous sur http://localhost:3000. Vous devriez voir la page d'accueil par défaut de Next.js.

2. Comprendre la structure de fichiers

3. Créer votre première page

export default function HomePage() {
  return (
    <main>
      <h1>Bienvenue sur mon site !</h1>
      <p>Créé avec Next.js 16</p>
    </main>
  );
}

export const metadata = {
  title: 'À propos | Mon Site',
  description: 'Découvrez notre équipe',
};

export default function AboutPage() {
  return <h1>À propos</h1>;
}

4. Optimisation des images

Next.js propose un composant Image qui optimise automatiquement les images (compression, format WebP, lazy loading).

Avant (JPEG lourd)

Après (WebP léger)

5. Déployer sur Vercel

Vercel est la plateforme créée par les auteurs de Next.js. Le déploiement se fait en quelques clics depuis GitHub.

1. 1

   Pousser sur GitHub

   bash

   Copier

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/votre-user/mon-site.git
   git push -u origin main

2. 2

   Connecter à Vercel

   Allez sur vercel.com, cliquez sur Add New Project, sélectionnez votre dépôt GitHub.

3. 3

   Déployer !

   Vercel détecte automatiquement que c'est un projet Next.js et configure tout. En 2 minutes votre site est en ligne avec un domaine HTTPS gratuit.

Checklist avant mise en production

• ✅Métadonnées SEO configurées (metadata dans layout.js)
• ✅Images optimisées avec le composant next/image
• ⬜Variables d'environnement ajoutées sur Vercel
• ⬜Domaine personnalisé configuré
• ⬜Google Analytics ou Umami installé

Le meilleur framework est celui que vous maîtrisez. Mais si vous partez de zéro en 2026, Next.js vous donnera une longueur d'avance considérable.

— Kerguitek

Conclusion

Vous avez maintenant les bases pour créer et déployer un site Next.js complet. Le prochain tutoriel couvrira la connexion à une base de données, l'authentification et la gestion d'état avec Zustand.