API Routes

Ton backend intégré. Plus besoin d'un serveur Express à côté.

6.1Créer un Route Handler

Dans Next.js App Router, une API Route s'appelle un Route Handler. Tu crées un fichier route.ts dans un dossier sous app/api/ :

Bashbash

app/
└── api/
    └── hello/
        └── route.ts      # → GET /api/hello

TSXtsx

// app/api/hello/route.ts

import { NextResponse } from 'next/server'

export async function GET() {
  return NextResponse.json({
    message: 'Salut depuis mon API Next.js !'
  })
}

Ouvre http://localhost:3000/api/hello dans ton navigateur. Tu verras le JSON s'afficher. Félicitations, tu viens de créer ta première API sans quitter ton projet !

6.2Les méthodes HTTP

Tu peux exporter une fonction pour chaque méthode HTTP. Chacune gère un type de requête :

TSXtsx

// app/api/messages/route.ts

import { NextRequest, NextResponse } from 'next/server'

// GET → Récupérer des données
export async function GET() {
  const messages = [
    { id: 1, text: 'Premier message' },
    { id: 2, text: 'Deuxième message' },
  ]
  return NextResponse.json(messages)
}

// POST → Créer une donnée
export async function POST(request: NextRequest) {
  const body = await request.json()

  // Ici tu sauvegarderais en base de données
  console.log('Nouveau message :', body.text)

  return NextResponse.json(
    { message: 'Message créé !' },
    { status: 201 }
  )
}

Méthode	Usage	Exemple
`GET`	Lire des données	Liste d'articles
`POST`	Créer une donnée	Envoyer un formulaire
`PUT`	Modifier une donnée	Éditer un profil
`DELETE`	Supprimer une donnée	Supprimer un compte

6.3Routes dynamiques dans l'API

Comme pour les pages, tu peux créer des routes API dynamiques avec des crochets :

Bashbash

app/
└── api/
    └── users/
        ├── route.ts          # → /api/users (GET tous, POST créer)
        └── [id]/
            └── route.ts      # → /api/users/42 (GET un, PUT, DELETE)

TSXtsx

// app/api/users/[id]/route.ts

import { NextRequest, NextResponse } from 'next/server'

export async function GET(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params

  // Simule une recherche en BDD
  const user = { id, name: `Utilisateur ${id}`, email: `user${id}@example.com` }

  return NextResponse.json(user)
}

export async function DELETE(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params

  // Ici tu supprimerais en BDD
  return NextResponse.json({ message: `Utilisateur ${id} supprimé` })
}

6.4Middleware : le videur de ton API

Le middleware s'exécute avant chaque requête. C'est comme un videur à l'entrée du restaurant : il vérifie les identités avant de laisser passer. Parfait pour l'authentification, les redirections, ou les logs.

TSXtsx

// middleware.ts (à la racine de ton projet !)

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Vérifie si l'utilisateur est connecté
  const token = request.cookies.get('session')

  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    // Pas connecté ? Redirige vers la page de connexion
    return NextResponse.redirect(new URL('/login', request.url))
  }

  // Connecté ? Laisse passer
  return NextResponse.next()
}

// Sur quelles routes le middleware s'applique
export const config = {
  matcher: ['/dashboard/:path*', '/api/protected/:path*']
}

6.5API Routes vs Server Actions

Tu te demandes peut-être : "Mais j'ai appris les Server Actions au chapitre précédent, c'est quoi la différence ?"

	Server Actions	API Routes
Usage	Formulaires, mutations	API publique, webhooks
Appelé par	Tes composants React	N'importe qui (fetch, Postman...)
Sécurité	Intégrée (CSRF auto)	À toi de la gérer
Idéal pour	Actions internes	API consommée par d'autres apps

API Routes

6.1Créer un Route Handler

6.2Les méthodes HTTP

6.3Routes dynamiques dans l'API

6.4Middleware : le videur de ton API

6.5API Routes vs Server Actions

Verifie tes acquis

Valide et sauvegarde ce chapitre