Niv. 3 — Avancé : une API + un front Next.js

Objectif : le cœur premium — exposer le catalogue en API Platform sécurisée par JWT, et le consommer depuis un front Next.js.

📋 Cahier des charges

Contexte — Le studio veut un front public (Next.js) où les clients consultent les prestataires et services, et un espace connecté.

Périmètre inclus

• API Platform sur Provider et Service : lecture publique, écriture réservée.
• Groupes de sérialisation (exposer le juste nécessaire, prix inclus).
• Filtres (recherche sur le nom, tri), pagination.
• JWT (LexikJWT) : POST /api/login_check, endpoints protégés par rôle.
• CORS configuré pour le front.
• Un front Next.js (App Router) qui : liste les prestataires (RSC), affiche un détail, et se connecte (JWT en cookie httpOnly).
• Types TypeScript générés depuis la spec OpenAPI.

Périmètre exclu — temps réel, paiement (Niv. 4).

Livrables — une API documentée (Swagger) + un front Next.js qui la consomme.

Critères de réussite

• /api (Swagger) liste les opérations ; lecture publique OK.
• Une écriture non autorisée renvoie 401/403 ; une donnée invalide 422.
• Le front Next.js liste et affiche les données via l’API.
• Le login pose un cookie httpOnly ; les requêtes serveur joignent le JWT.
• Les types TS sont générés (pas écrits à la main).

🗺️ Endroits à visiter

🧭 Étapes suggérées

1. composer require api, ajouter #[ApiResource] + groupes sur Provider/Service.
2. Ajouter #[ApiFilter(...)] (recherche/tri) ; vérifier dans Swagger.
3. composer require lexik/jwt-authentication-bundle, générer les clés, configurer le firewall api (json_login + jwt).
4. composer require nelmio/cors-bundle, autoriser l’origine du front.
5. Côté Next.js : un helper apiFetch (cookie httpOnly), une page RSC de liste, une Server Action de login.
6. npx openapi-typescript http://localhost:8000/api/docs.json -o src/lib/api-types.ts.

🎁 Bonus : exposez aussi une opération GraphQL (11.7) et consommez-la avec graphql-request.

Projet suivant : Niv. 4 — Temps réel & async.