Retour • 23/11/2024

Les API Routes en NextJS 15 : Comment ça fonctionne ?

Écris par Melvyn Malherbe le 23/11/2024

Les API Routes permettent de venir créer des endpoints API dans une application NextJS qui peut soit créer, modifier ou même supprimer des données de ta base de données. En NextJS les API Routes sont définies avec une norme de fichier route.ts et un chemin avec les dossiers.

Dans cet article, on va voir comment créer des API Routes dans une application NextJS 15.

Comment créer une API Route ?

Pour créer une API Route en NextJS tu peux aller dans n'importe quel dossier de ton app et créer un fichier route.ts :

Comme tu peux le voir, ici j'ai fait deux routes :

• /api/products
• /users

Depuis la dernière version de NextJS tu peux créer des API routes dans n'importe quel dossier. La seule règle c'est de ne pas avoir un fichier route.ts et page.ts dans le même dossier, sinon ça rentre en conflit et crée des problèmes.

Les fichiers routes peuvent aussi avoir des paramètres en utilisant la syntaxe [param] dans les dossiers :

Syntaxe dans le fichier route.ts

Dans le fichier route.ts on va venir exporter des méthodes qui s'appellent du même nom que les verbes HTTP :

export const GET = async () => {
  return NextResponse.json({ message: 'Hello World' });
};

export const POST = async () => {
  return NextResponse.json({ message: 'Hello World' });
};

export const PUT = async () => {
  return NextResponse.json({ message: 'Hello World' });
};

export const DELETE = async () => {
  return NextResponse.json({ message: 'Hello World' });
};

Paramètre des méthodes

Chaque méthode verbe HTTP que j'ai mise en démonstration ici te permet ensuite de récupérer les paramètres de l'URL :

export const GET = async (request: Request, context: { params: Promise<{ id: string }> }) => {
  const params = await context.params;
  return NextResponse.json({ message: `Hello ${params.id}` });
};

Ensuite il y a la request qui possède tous les détails de notre requête HTTP comme le body dont tu vas avoir besoin pour les requêtes POST :

export const POST = async (request: Request) => {
  const body = await request.json();
  return NextResponse.json({ message: `Hello ${body.name}` });
};

Tu peux voir que l'API que propose NextJS correspond aux standards et fonctionne un peu comme avec fetch !

Comment sécuriser ses API Routes ?

Il faut savoir que n'importe qui qui possède l'URL de ton API Route est capable d'appeler cette URL avec les données qu'il veut. Il faut donc sécuriser ses API Routes de deux manières :

• vérifier les droits de l'utilisateur
• vérifier les données envoyées

Vérifier les droits de l'utilisateur

Pour ça, il faut utiliser un outil qui te permet d'authentifier tes utilisateurs, imaginons que tu as une méthode auth qui te retourne le user qui a fait la requête via les cookies :

// /api/products/[id]
export const DELETE = async (request: Request, context: { params: Promise<{ id: string }> }) => {
  const user = await auth();
  if (!user) {
    return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
  }

  // on récupère le produit
  const params = await context.params;
  const product = await prisma.product.findFirst({
    where: { id: params.id },
  });

  // On vérifie toujours que l'utilisateur a le droit d'interagir avec la ressource, ici le produit
  if (product.creatorId !== user.id) {
    return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
  }

  await prisma.product.delete({
    where: { id: params.id },
  });

  return NextResponse.json({ message: 'Product deleted' }, { status: 200 });
};

C'est important de tout le temps :

• vérifier que l'utilisateur est authentifié
• vérifier que la ressource qu'il modifie lui appartient

Il faut vraiment toujours faire ça !

Vérifier les données envoyées

Pour ça, il faut utiliser des outils comme Zod pour valider les données envoyées par l'utilisateur.

Imaginons que tu as une route pour créer un produit et que tu veux vérifier que le nom du produit fait moins de 100 caractères :

const PostSchema = z.object({
  name: z.string().min(1).max(100),
});

export const POST = async (request: Request) => {
  const body = await request.json();
  const { name } = PostSchema.parse(body);

  // Todo : créer le produit
};

En faisant ça tu t'assures que les données envoyées sont valides et tu peux légalement considérer que les données sont correctes.

Aller plus loin

Pour aller plus loin dans la création de routes API sécurisées et typées, je te recommande de consulter l'article Le meilleur moyen de créer des API Routes en NextJS App Directory. Cet article explique comment utiliser la librairie next-zod-route pour simplifier le routage et garantir la sécurité et la validité des données grâce à Zod. Tu y trouveras des exemples concrets et des explications détaillées pour intégrer ces pratiques dans tes projets NextJS.

Voici un exemple de code qui utilise next-zod-route pour vérifier automatiquement le corps de la requête et récupérer l'utilisateur :

import { route } from '~/lib/safe-route'
import { z } from 'zod'

const ProductSchema = z.object({
  name: z.string().min(1).max(100),
  price: z.number().positive(),
})

export const POST = route.body(ProductSchema).use(async () => {
  const user = await auth()

  if (!user) {
    throw new RouteError('User not authenticated', 401)
  }

  return { user }
}).handler(async (req, { body, context }) => {
  const { name, price } = body
  const { user } = context

  await prisma.product.create({
    data: {
      name,
      price,
      creatorId: user.id,
    },
  })

  return NextResponse.json({ message: 'Product created' }, { status: 201 })
})

Conclusion

Tu es maintenant un PRO NextJS et tu peux créer des API Routes sécurisées et typées pour tes applications NextJS !

Si tu veux maîtriser tous les détails qui font de NextJS un super framework rends-toi ici :