Introduction
Le Backend for Frontend (BFF) est un pattern architectural qui consiste à créer une couche backend dédiée à chaque type de client (web, mobile). Cette approche permet d'agréger les données de plusieurs microservices, de gérer l'authentification et de réduire les appels réseau depuis le frontend. En 2026, avec l'essor des applications distribuées, le BFF devient essentiel pour optimiser les performances et la maintenabilité. Ce tutoriel vous montre comment implémenter un BFF avec Next.js de manière concrète et professionnelle.
Prérequis
- Node.js 20+
- Connaissances intermédiaires de TypeScript et Next.js
- npm ou pnpm installé
- Compte sur Vercel ou un hébergeur similaire
Initialisation du projet Next.js
npx create-next-app@latest bff-demo --yes
cd bff-demo
npm install axios zodCette commande crée un projet Next.js moderne et installe axios pour les requêtes HTTP ainsi que zod pour la validation des données. Ces dépendances sont indispensables pour un BFF robuste.
Création de la route BFF principale
import { NextResponse } from 'next/server';
import axios from 'axios';
import { z } from 'zod';
const DashboardSchema = z.object({
userId: z.string(),
});
export async function POST(request: Request) {
const body = await request.json();
const { userId } = DashboardSchema.parse(body);
const [user, orders] = await Promise.all([
axios.get(`https://api.users.com/${userId}`),
axios.get(`https://api.orders.com?userId=${userId}`),
]);
return NextResponse.json({
user: user.data,
orders: orders.data,
});
}Cette route API Next.js agit comme BFF. Elle agrège les données de deux services externes en une seule requête, réduisant ainsi la latence côté client. Zod assure la validation stricte des inputs.
Ajout de la couche d'authentification
import { NextResponse } from 'next/server';
// ... imports précédents
export async function POST(request: Request) {
const authHeader = request.headers.get('Authorization');
if (!authHeader?.startsWith('Bearer ')) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
// Suite du code d'agrégation...
}On ajoute une vérification du token JWT directement dans le BFF. Cela centralise la logique d'authentification et évite de l'implémenter sur chaque microservice.
Gestion du cache et des erreurs
import { unstable_cache } from 'next/cache';
export const getCachedDashboard = unstable_cache(
async (userId: string) => {
// Logique d'appel BFF ici
return { user: {}, orders: [] };
},
['dashboard'],
{ revalidate: 60, tags: ['dashboard'] }
);Next.js unstable_cache permet de mettre en cache les réponses du BFF pendant 60 secondes. Cela réduit la charge sur les services backend et améliore les performances.
Appel depuis le composant client
'use client';
import { useEffect, useState } from 'react';
export default function Dashboard() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/bff/dashboard', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ userId: '123' }),
})
.then(res => res.json())
.then(setData);
}, []);
return <pre>{JSON.stringify(data, null, 2)}</pre>;
}Le composant React appelle uniquement le BFF. Cela simplifie le frontend et masque la complexité des microservices sous-jacents.
Bonnes pratiques
- Toujours valider les entrées avec Zod ou un schéma similaire
- Centraliser la logique d'authentification et d'autorisation dans le BFF
- Utiliser le cache Next.js pour les données peu volatiles
- Surveiller les latences des services externes
- Documenter chaque endpoint BFF avec OpenAPI
Erreurs courantes à éviter
- Oublier la gestion des erreurs asynchrones avec try/catch
- Exposer directement les erreurs des microservices au client
- Ne pas configurer les en-têtes CORS correctement
- Créer des BFF trop volumineux qui deviennent des god objects
Pour aller plus loin
Approfondissez l'architecture BFF et les patterns modernes avec nos formations expertes : https://learni-group.com/formations