Mode d'emploi — de zéro à déployé

Vitrine

Site vitrine pour présenter une activité : services, à propos, contact. Pas de compte utilisateur, pas de base de données — le strict nécessaire.

Sommaire

01Initialiser le projet Next.js

02Structurer les pages

03Habillage — Tailwind & shadcn/ui

04Formulaire de contact

05SEO de base

06Déploiement — Vercel

Règle du jeu : tu tapes chaque commande toi-même dans ton terminal, dans l'ordre. Tu ne passes à l'étape suivante que quand la case « vérification » est cochée. Si une commande plante, copie-colle l'erreur exacte — on corrige ensemble, tu ne devines pas.

Réutilisable vs spécifique : les étapes réutilisable sont valables pour n'importe quel projet de ta stack. Les étapes spécifique sont propres à un site vitrine — adapte le contenu (pages, textes) au tien.

📖 C'est quoi chaque techno (Next.js, Tailwind, shadcn/ui...) ? Le lexique complet est sur la page d'accueil →

Réutilisable

Initialiser le projet Next.js

Un projet Next.js qui démarre en local, avec Tailwind et shadcn/ui prêts à l'emploi.

Prérequis : Node.js installé. Terminal ouvert dans le dossier du projet.

Installe pnpm si besoin
```
npm install -g pnpm
```
pnpm est le gestionnaire de paquets choisi pour ce projet — plus rapide et plus économe en espace disque que npm.

👁 Comment voir le résultat : tape pnpm -v. Un numéro de version s'affiche (ex. 9.12.0) — sinon l'installation a échoué.
Crée le projet Next.js
```
pnpm create next-app@latest . --typescript --tailwind --eslint --app --src-dir=false --import-alias "@/*"
```
Le nom du dossier ne doit pas contenir de majuscules (contrainte npm). S'il en contient, crée le projet dans un dossier temporaire au nom valide puis déplace tout son contenu dans ton dossier de travail.

👁 Comment voir le résultat : tape ls. Tu dois voir apparaître app/, package.json, tailwind.config.ts — la commande a rempli ton dossier de fichiers.
Initialise shadcn/ui
```
pnpm dlx shadcn@latest init
```
Ça crée components.json et lib/utils.ts, et prépare Tailwind pour recevoir des composants shadcn/ui prêts à copier.

👁 Comment voir le résultat : tape ls components.json lib/utils.ts — les deux fichiers doivent exister, sans message d'erreur « No such file ».
Crée l'arborescence du projet
```
mkdir -p lib/auth lib/db lib/validations prisma testsmkdir lib/auth, lib/db, lib/validations, prisma, tests
```
On sépare dès le départ : authentification, accès base de données, schémas de validation. Ça évite le fichier fourre-tout de 2000 lignes plus tard.

👁 Comment voir le résultat : tape ls lib — les dossiers auth, db, validations doivent apparaître.
Initialise Git et fais le premier commit
```
git init
git add -A
git commit -m "chore: init projet Next.js"
```
👁 Comment voir le résultat : tape git log --oneline — une ligne avec ton message de commit doit s'afficher.
Lance le serveur et vérifie
```
pnpm dev
```
Ouvre http://localhost:3000. Si tu as une erreur 500 mentionnant un module introuvable (ex. Can't resolve 'xxx') alors qu'il est bien dans package.json : supprime node_modules, pnpm-lock.yaml et .next, relance pnpm install puis pnpm dev. C'est presque toujours une installation incomplète, pas un bug de code.

👁 Comment voir le résultat : dans ton navigateur, ouvre localhost:3000. Tu dois voir la page d'accueil par défaut de Next.js (logo, liens « Docs », « Deploy »). Le terminal affiche Ready et n'affiche pas d'erreur rouge.

Vérification

pnpm dev tourne sans erreur, la page par défaut de Next.js s'affiche sur localhost:3000. git log montre un commit.

Spécifique vitrine

Structurer les pages

Une arborescence claire : Accueil, Services, À propos, Contact.

Prérequis : étape 1 validée.

Liste les pages nécessaires avant de coder

Évite d'improviser l'arborescence au fil de l'eau — note juste les 3-5 pages dont le site a vraiment besoin. Pour ce guide : Accueil, Services, À propos, Contact.
Crée les dossiers des 3 pages restantes
```
mkdir -p app/services app/a-propos app/contactmkdir app/services, app/a-propos, app/contact
```
app/page.tsx (la page d'accueil) existe déjà depuis la création du projet à l'étape 1 — seules les 3 nouvelles sections ont besoin d'un dossier.

👁 Comment voir le résultat : tape ls app — les dossiers services, a-propos et contact doivent apparaître.
Crée le fichier page.tsx de chaque page
```
touch app/services/page.tsx app/a-propos/page.tsx app/contact/page.tsxNew-Item -ItemType File -Force -Path app/services/page.tsx, app/a-propos/page.tsx, app/contact/page.tsx
```
Dans le dossier app/ de Next.js, chaque sous-dossier contenant un fichier page.tsx devient une URL du même nom.

👁 Comment voir le résultat : tape ls app/services app/a-propos app/contact — chaque dossier doit contenir un fichier page.tsx (vide pour l'instant, il ne s'affichera pas encore).
Ouvre chaque fichier et colle un contenu minimal
```
// app/services/page.tsx
export default function ServicesPage() {
  return (
    <main className="p-8">
      <h1 className="text-2xl font-bold">Nos services</h1>
      <p>Décris ici ce que tu proposes.</p>
    </main>
  );
}
```
Un fichier page.tsx vide fait planter le build (« The default export is not a React Component ») — il lui faut au minimum une fonction exportée par défaut qui retourne du JSX. Répète la même structure dans app/a-propos/page.tsx (fonction AProposPage) et app/contact/page.tsx (fonction ContactPage — le vrai formulaire arrive à l'étape 3, un simple titre suffit pour l'instant).

👁 Comment voir le résultat : ouvre localhost:3000/services, /a-propos et /contact dans le navigateur. Chaque URL doit afficher son contenu — pas de page « 404 This page could not be found » ni d'erreur rouge dans le terminal.

Crée le dossier et les fichiers du header et du footer

mkdir -p components && touch components/header.tsx components/footer.tsxNew-Item -ItemType Directory -Force -Path components; New-Item -ItemType File -Force -Path components/header.tsx, components/footer.tsx

👁 Comment voir le résultat : tape ls components — header.tsx et footer.tsx doivent apparaître.

Colle le contenu du header et du footer

// components/header.tsx
import Link from "next/link";

export default function Header() {
  return (
    <header className="border-b p-4 flex gap-4">
      <Link href="/">Accueil</Link>
      <Link href="/services">Services</Link>
      <Link href="/a-propos">À propos</Link>
      <Link href="/contact">Contact</Link>
    </header>
  );
}

// components/footer.tsx
export default function Footer() {
  return (
    <footer className="border-t p-4 text-sm text-center">
      © {new Date().getFullYear()} Ton Activité
    </footer>
  );
}

Ces deux composants seront importés une seule fois dans app/layout.tsx à l'étape suivante — évite de dupliquer la navigation sur chaque page.

Importe le header et le footer dans app/layout.tsx
```
// app/layout.tsx
import Header from "@/components/header";
import Footer from "@/components/footer";

// ... dans le return, à l'intérieur de <body> :
<body>
  <Header />
  {children}
  <Footer />
</body>
```
Next.js applique app/layout.tsx à toutes les pages — c'est le seul endroit où déclarer le header et le footer.

👁 Comment voir le résultat : retourne sur localhost:3000 — ton en-tête et ton pied de page doivent apparaître, et rester identiques si tu changes de page.
Ajoute les composants shadcn/ui nécessaires
```
pnpm dlx shadcn@latest add button card
```
👁 Comment voir le résultat : tape ls components/ui — button.tsx et card.tsx doivent apparaître, prêts à être importés dans tes pages.

Vérification

Chaque page a sa propre URL et s'affiche correctement. La navigation (en-tête) permet de passer d'une page à l'autre.

Réutilisable

Habillage — Tailwind & shadcn/ui

Un rendu visuel cohérent sur tout le site, et une méthode simple pour le modifier plus tard.

Prérequis : étape 2 validée.

Comprends où vit le style

Il n'y a pas un fichier .css par page. Deux niveaux seulement : les variables de thème globales dans app/globals.css (couleurs, arrondi — générées par shadcn init à l'étape 1, chargées une seule fois par app/layout.tsx), et les classes Tailwind écrites directement dans le className de chaque composant.
Personnalise les couleurs du thème

Ouvre app/globals.css — repère le bloc :root { ... } généré par shadcn init, qui contient des variables comme --primary ou --background. Change leurs valeurs directement dans ce fichier.

👁 Comment voir le résultat : modifie la valeur de --primary, enregistre, recharge localhost:3000 — n'importe quel composant shadcn/ui (le Button ajouté à l'étape précédente) doit changer de couleur automatiquement, sans toucher au code des pages.
Crée une mise en page cohérente, réutilisée sur chaque page
```
touch components/container.tsxNew-Item -ItemType File -Force -Path components/container.tsx
```
```
// components/container.tsx
export default function Container({ children }: { children: React.ReactNode }) {
  return (
    <div className="max-w-5xl mx-auto px-4 py-12">
      {children}
    </div>
  );
}
```
Sans ça, tu répètes les mêmes classes d'espacement (max-w-5xl mx-auto px-4 py-12) dans chaque fichier page.tsx — un seul endroit à modifier si tu changes la largeur ou les marges du site.

👁 Comment voir le résultat : enveloppe le contenu retourné par app/page.tsx, app/services/page.tsx, etc. avec <Container>...</Container> — chaque page doit s'afficher centrée, avec la même marge, une fois rechargée.
Remplace le HTML brut par les composants shadcn/ui déjà installés
```
// avant
<button className="bg-blue-500 text-white px-4 py-2 rounded">Envoyer</button>

// après
import { Button } from "@/components/ui/button";
<Button>Envoyer</Button>
```
Le composant Button hérite automatiquement des variables de thème définies plus haut — un <button> HTML brut, non. Change --primary et seul le premier ne suivra pas.
Pour modifier le style plus tard

Garde pnpm dev lancé en continu — le rechargement à chaud applique tes changements dans le navigateur dès que tu sauvegardes, sans redémarrer le serveur. Ouvre le fichier de la page ou du composant concerné, change les classes dans className, enregistre. Pour ajouter un nouveau composant shadcn/ui : pnpm dlx shadcn@latest add <nom> (liste sur ui.shadcn.com). Pour savoir ce que fait une classe (p-4, rounded-lg, text-xl...), consulte le lexique ou tailwindcss.com/docs.

Vérification

Changer --primary dans globals.css modifie la couleur des composants shadcn/ui partout, sans toucher au code des pages. Le contenu de chaque page est centré et espacé de façon identique, grâce à Container.

Spécifique vitrine

Formulaire de contact

Recevoir un message par email, sans base de données à gérer.

Prérequis : étape 3 validée.

Choisis un service d'envoi d'email

Pas besoin de stocker le message en base pour un simple formulaire de contact — un envoi direct par email suffit. Resend a un plan gratuit largement suffisant pour démarrer.
Installe le SDK
```
pnpm add resend
```
👁 Comment voir le résultat : ouvre package.json — resend doit apparaître dans dependencies.
Ajoute la clé API dans .env
```
# .env
RESEND_API_KEY="ta-clé"
```
👁 Comment voir le résultat : pas d'effet visible tout de suite — cette clé sera testée concrètement à l'étape suivante, quand le formulaire enverra un vrai email.

Écris la Server Action d'envoi

"use server";
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendContact(formData: FormData) {
  const email = formData.get("email");
  const message = formData.get("message");
  await resend.emails.send({
    from: "site@tondomaine.com",
    to: "toi@tondomaine.com",
    subject: "Nouveau message du site",
    text: `${email}\n\n${message}`,
  });
}

Valide email et message avec Zod avant l'envoi — bloque les champs vides ou les emails mal formés.

👁 Comment voir le résultat : remplis le formulaire sur localhost:3000/contact avec un vrai email et envoie-le. Vérifie ta boîte de réception (et les spams) — le message doit arriver en quelques secondes.

Vérification

Un message test envoyé depuis le formulaire arrive bien dans ta boîte mail. Soumettre le formulaire vide affiche une erreur, sans envoyer d'email.

Réutilisable

SEO de base

Que le site soit correctement référencé et compris par Google.

Prérequis : étape 4 validée.

Renseigne les métadonnées
```
// app/layout.tsx
export const metadata = {
  title: "Nom de ton activité",
  description: "Une phrase claire sur ce que tu proposes.",
};
```
C'est ce texte qui s'affiche dans l'onglet du navigateur et dans les résultats Google.

👁 Comment voir le résultat : recharge localhost:3000 et regarde l'onglet du navigateur — le nouveau titre doit y être affiché à la place de « create-next-app ».
Crée un sitemap et un robots.txt
```
touch app/sitemap.ts app/robots.tsNew-Item -ItemType File -Force -Path app/sitemap.ts, app/robots.ts
```
Deux fichiers spéciaux Next.js qui indiquent à Google quelles pages explorer.

Colle le contenu de chaque fichier

// app/sitemap.ts
import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  const base = "https://tondomaine.vercel.app";
  return ["", "/services", "/a-propos", "/contact"].map((path) => ({
    url: `${base}${path}`,
    lastModified: new Date(),
  }));
}

// app/robots.ts
import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: "*", allow: "/" },
    sitemap: "https://tondomaine.vercel.app/sitemap.xml",
  };
}

Remplace tondomaine.vercel.app par ton URL réelle une fois qu'elle est connue (étape 5).

👁 Comment voir le résultat : ouvre localhost:3000/sitemap.xml et localhost:3000/robots.txt — chacune doit afficher du texte structuré, pas une page d'erreur.

Utilise next/image pour toutes les images

Compression et chargement différé automatiques — un site plus rapide se classe mieux.

👁 Comment voir le résultat : clic droit sur une image affichée → « Inspecter » — la balise doit avoir un attribut srcset généré automatiquement, avec plusieurs tailles d'image.

Vérification

Le titre de l'onglet du navigateur est correct sur chaque page. tonsite.vercel.app/sitemap.xml affiche bien la liste des pages une fois déployé.

Réutilisable

Déploiement — Vercel

Une URL publique et fonctionnelle.

Prérequis : étape 5 validée.

Pousse le code sur GitHub
```
git remote add origin URL-DE-TON-DEPOT
git push -u origin master
```
👁 Comment voir le résultat : rafraîchis la page du dépôt sur GitHub dans ton navigateur — tes fichiers doivent y apparaître.
Importe le projet sur Vercel

Sur vercel.com → Add New → Project → sélectionne le dépôt GitHub.

👁 Comment voir le résultat : le tableau de bord Vercel passe de « Building » à « Ready » (quelques dizaines de secondes), avec un lien de prévisualisation cliquable.
Ajoute RESEND_API_KEY dans les variables d'environnement

Settings → Environment Variables — sans ça le formulaire de contact ne fonctionnera pas en production.

👁 Comment voir le résultat : pas d'effet visible immédiatement — redéploie (bouton « Redeploy ») puis teste le formulaire en production à l'étape suivante.
Déploie et vérifie en ligne

Ouvre l'URL fournie par Vercel, teste le formulaire de contact pour de vrai.

👁 Comment voir le résultat : le site s'affiche sur l'URL *.vercel.app, et un message envoyé depuis ce formulaire en ligne arrive bien dans ta boîte mail — comme en local, mais pour de vrai.

Vérification

Le build Vercel passe sans erreur. Le formulaire de contact fonctionne sur l'URL publique.