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

03Formulaire de contact

04SEO de base

05Dé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 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.
Crée un en-tête et un pied de page partagés
```
components/header.tsx
components/footer.tsx
```
Importés dans app/layout.tsx — évite de dupliquer la navigation sur chaque page.

👁 Comment voir le résultat : une fois importés dans layout.tsx, retourne sur localhost:3000 — ton en-tête et ton pied de page doivent apparaître, et rester identiques si tu changes de page.
Crée une page par section
```
app/page.tsx              # Accueil
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 : 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 ».
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.

Spécifique vitrine

Formulaire de contact

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

Prérequis : étape 2 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 3 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 ».
Ajoute un sitemap et un robots.txt
```
app/sitemap.ts
app/robots.ts
```
Deux fichiers spéciaux Next.js qui indiquent à Google quelles pages explorer.

👁 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 4 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.