Next.js 15 Guide Complet de Développement

# Next.js 15 Guide Complet de Développement

Créez des applications web modernes et performantes avec Next.js 15 en utilisant les dernières fonctionnalités comme App Router et Server Components.

## Configuration du Projet

### Créer un Nouveau Projet

```bash
npx create-next-app@latest mon-projet --typescript --tailwind --app
cd mon-projet
npm run dev
```

### Structure de Répertoires Recommandée

```
mon-projet/
├── src/
│   ├── app/                    # App Router (routes et pages)
│   │   ├── layout.tsx          # Layout principal
│   │   ├── page.tsx            # Page d accueil
│   │   ├── loading.tsx         # État de chargement
│   │   └── error.tsx           # Gestion des erreurs
│   ├── components/             # Composants réutilisables
│   │   ├── ui/                 # Composants UI
│   │   └── forms/              # Composants de formulaires
│   ├── lib/                    # Utilitaires et configurations
│   └── types/                  # Définitions TypeScript
└── next.config.ts              # Configuration Next.js
```

## Composants Serveur

Les composants serveur sont rendus entièrement sur le serveur et réduisent le JavaScript envoyé au client.

### Exemple de Composant Serveur

```typescript
// app/produits/page.tsx
import { obtenirProduits } from "@/lib/api";

// Ce composant est rendu entièrement sur le serveur
export default async function PageProduits() {
  // Récupérer les données directement sans useEffect
  const produits = await obtenirProduits();

  return (
    <main className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6">Nos Produits</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {produits.map((produit) => (
          <article key={produit.id} className="border rounded-lg p-4">
            <h2 className="text-xl font-semibold">{produit.nom}</h2>
            <p className="text-gray-600">{produit.description}</p>
            <span className="text-lg font-bold text-blue-600">
              {produit.prix} €
            </span>
          </article>
        ))}
      </div>
    </main>
  );
}
```

## Actions Serveur

```typescript
// app/actions/contact.ts
"use server";

import { z } from "zod";
import { revalidatePath } from "next/cache";

const schemaContact = z.object({
  nom: z.string().min(2, "Le nom doit contenir au moins 2 caractères"),
  email: z.string().email("Adresse email invalide"),
  message: z.string().min(10, "Le message doit contenir au moins 10 caractères"),
});

export async function envoyerContact(formData: FormData) {
  const donnees = {
    nom: formData.get("nom") as string,
    email: formData.get("email") as string,
    message: formData.get("message") as string,
  };

  const resultat = schemaContact.safeParse(donnees);

  if (!resultat.success) {
    return {
      succes: false,
      erreurs: resultat.error.flatten().fieldErrors,
    };
  }

  await sauvegarderMessage(resultat.data);
  revalidatePath("/contact");
  
  return { succes: true, message: "Message envoyé avec succès" };
}
```

### Formulaire avec Action Serveur

```typescript
// components/FormulaireContact.tsx
"use client";

import { useFormState, useFormStatus } from "react-dom";
import { envoyerContact } from "@/app/actions/contact";

function BoutonEnvoyer() {
  const { pending } = useFormStatus();
  return (
    <button
      type="submit"
      disabled={pending}
      className="bg-blue-600 text-white px-6 py-2 rounded-lg disabled:opacity-50"
    >
      {pending ? "Envoi en cours..." : "Envoyer le message"}
    </button>
  );
}

export function FormulaireContact() {
  const [etat, action] = useFormState(envoyerContact, null);

  return (
    <form action={action} className="space-y-4 max-w-md">
      <div>
        <label htmlFor="nom" className="block text-sm font-medium">
          Nom
        </label>
        <input
          type="text"
          id="nom"
          name="nom"
          required
          className="mt-1 block w-full rounded-md border px-3 py-2"
        />
        {etat?.erreurs?.nom && (
          <p className="text-red-500 text-sm">{etat.erreurs.nom}</p>
        )}
      </div>

      <div>
        <label htmlFor="email" className="block text-sm font-medium">
          Adresse Email
        </label>
        <input
          type="email"
          id="email"
          name="email"
          required
          className="mt-1 block w-full rounded-md border px-3 py-2"
        />
      </div>

      <div>
        <label htmlFor="message" className="block text-sm font-medium">
          Votre Message
        </label>
        <textarea
          id="message"
          name="message"
          rows={4}
          required
          className="mt-1 block w-full rounded-md border px-3 py-2"
        />
      </div>

      <BoutonEnvoyer />

      {etat?.succes && (
        <p className="text-green-600">{etat.message}</p>
      )}
    </form>
  );
}
```

Ce guide complet aide les développeurs francophones à maîtriser Next.js 15.