Maîtrisez Next.js 15 avec App Router, Server Components et Server Actions. Apprenez les meilleures pratiques pour le développement web moderne avec React et TypeScript.
# 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.This nextjs prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their nextjs implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For nextjs projects, consider mentioning your framework version, coding style, and any specific libraries you're using.