Frontend Academy · Leçon

Routes d’API et intergiciels Next.js

Routes d’API et intergiciels Next.js est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Pourquoi des routes API ?

Next.js intègre un serveur à votre application : vous pouvez écrire des points de terminaison côté serveur à côté de vos pages, sans projet Node distinct. C'est idéal pour servir de proxy, envoyer des formulaires, gérer des webhooks et créer de petites API.

Routes API du routeur Pages

Les fichiers de pages/api/ exportent une fonction par défaut avec req et res, selon le style d'Express.

// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const users = await db.users.findMany();
    return res.json(users);
  }
  if (req.method === 'POST') {
    const user = await db.users.create({ data: req.body });
    return res.status(201).json(user);
  }
  return res.status(405).end();
}

Gestionnaires de routes du routeur App

Le routeur App utilise l'API Request/Response standard du Web. Chaque méthode HTTP est un export nommé.

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const users = await db.users.findMany();
  return NextResponse.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

Routes API dynamiques

Les segments dynamiques fonctionnent de la même façon : app/api/users/[id]/route.ts correspond à /api/users/123.

// app/api/users/[id]/route.ts
export async function GET(req: Request, { params }: { params: { id: string }}) {
  const user = await db.users.findUnique({ where: { id: params.id }});
  if (!user) return new Response('Not Found', { status: 404 });
  return Response.json(user);
}

Lire les cookies et les en-têtes

Dans le routeur App, utilisez les utilitaires de next/headers, associés à la requête.

import { cookies, headers } from 'next/headers';

export async function GET() {
  const token = cookies().get('token')?.value;
  const userAgent = headers().get('user-agent');
  // ...
}

Réponses en continu

Les gestionnaires de routes peuvent renvoyer une réponse en continu, ce qui est utile pour les complétions de conversations par IA ou la génération de fichiers volumineux.

export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < 5; i++) {
        controller.enqueue(encoder.encode(`chunk ${i}\n`));
        await new Promise(r => setTimeout(r, 500));
      }
      controller.close();
    }
  });
  return new Response(stream);
}

Intergiciel — Exécuter avant les routes

middleware.ts à la racine du projet s'exécute avant que les requêtes n'atteignent les pages ou les routes API. Utilisez-le pour vérifier l'authentification, effectuer des redirections, réécrire des en-têtes et réaliser des tests A/B.

// middleware.ts
import { NextResponse, type NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

Sélecteur de l'intergiciel

Limitez les chemins sur lesquels l'intergiciel s'exécute avec une configuration de sélection.

export const config = {
  matcher: [
    '/dashboard/:path*',
    '/api/:path*',
    '/((?!_next/static|_next/image|favicon.ico).*)'
  ]
};

Environnement d'exécution de l'intergiciel

L'intergiciel s'exécute par défaut dans Edge Runtime, un isolat V8 léger, et non dans Node au complet. Les API disponibles sont limitées : aucun module Node comme fs ni dépendance native.

Modèle d'authentification avec un intergiciel

Approche courante : vérifiez un JWT dans l'intergiciel, redirigez vers la connexion s'il est absent ou invalide, puis ajoutez l'utilisateur décodé à un en-tête de requête que les routes en aval peuvent lire.

import jwt from 'jsonwebtoken';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', req.url));
  try {
    const decoded = jwt.verify(token, process.env.SECRET!);
    const res = NextResponse.next();
    res.headers.set('x-user-id', String(decoded.sub));
    return res;
  } catch {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

Limiter le débit avec un intergiciel

Associez l'intergiciel à un magasin KV (Upstash, Vercel KV) pour imposer des limites de débit par IP avant d'atteindre votre logique API.

Quand NOT utiliser les routes API

Pour des microservices distincts ou des API partagées, déployez un véritable service côté serveur (Hono, Express, NestJS). Les routes API de Next.js sont particulièrement adaptées aux proxys, aux webhooks et aux points de terminaison propres à l'application, mais pas à la diffusion d'une API publique destinée à d'autres clients.

Vérification rapide

Où l'intergiciel de Next.js s'exécute-t-il, et quel est son cas d'utilisation le plus courant ?

Récapitulatif : routes API et intergiciel

Routeur Pages : pages/api avec req/res. Routeur App : app/api/.../route.ts avec des exports de méthodes (GET/POST/etc.) utilisant Request/Response. Lisez les cookies et les en-têtes via next/headers. Réponses en continu avec ReadableStream. middleware.ts s'exécute sur Edge avant les routes : authentification, redirections et en-têtes. La configuration de sélection limite les chemins. Utilisez un véritable serveur côté serveur pour les API publiques.

Questions Fréquemment Posées

La leçon « Routes d’API et intergiciels Next.js » est-elle gratuite ?

Oui — le texte complet de « Routes d’API et intergiciels Next.js » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Routes d’API et intergiciels Next.js » ?

Créez des points de terminaison d’API sans serveur dans le répertoire api/, traitez les requêtes dans les gestionnaires de routes et exécutez un intergiciel edge pour l’authentification et les redire… Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Routes d’API et intergiciels Next.js » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Frontend Academy