Comment gérer les redirections dans Next.js

Il existe plusieurs façons de gérer les redirections dans Next.js. Cette page présente chaque option disponible, leurs cas d'utilisation et comment gérer un grand nombre de redirections.

API	Objectif	Emplacement	Code de statut
`useRouter`	Effectuer une navigation côté client	Composants	N/A
`redirects` dans `next.config.js`	Rediriger une requête entrante basée sur un chemin	Fichier `next.config.js`	307 (Temporaire) ou 308 (Permanent)
`NextResponse.redirect`	Rediriger une requête entrante basée sur une condition	Middleware	Quelconque

Hook `useRouter()`

Si vous devez rediriger dans un composant, vous pouvez utiliser la méthode push du hook useRouter. Par exemple :

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Dashboard
    </button>
  )
}

Bon à savoir :

Si vous n'avez pas besoin de naviguer programmatiquement un utilisateur, utilisez plutôt un composant <Link>.

Consultez la référence API de useRouter pour plus d'informations.

`redirects` dans `next.config.js`

L'option redirects dans le fichier next.config.js permet de rediriger un chemin de requête entrant vers une destination différente. C'est utile lorsque vous changez la structure d'URL des pages ou avez une liste de redirections connues à l'avance.

redirects prend en charge la correspondance de chemin, d'en-tête, de cookie et de requête, offrant la flexibilité de rediriger les utilisateurs en fonction d'une requête entrante.

Pour utiliser redirects, ajoutez l'option à votre fichier next.config.js :

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  async redirects() {
    return [
      // Redirection basique
      {
        source: '/about',
        destination: '/',
        permanent: true,
      },
      // Correspondance de chemin avec wildcard
      {
        source: '/blog/:slug',
        destination: '/news/:slug',
        permanent: true,
      },
    ]
  },
}

export default nextConfig

Consultez la référence API de redirects pour plus d'informations.

Bon à savoir :

redirects peut retourner un code de statut 307 (Redirection Temporaire) ou 308 (Redirection Permanente) avec l'option permanent.

redirects peut avoir une limite sur certaines plateformes. Par exemple, sur Vercel, la limite est de 1 024 redirections. Pour gérer un grand nombre de redirections (1000+), envisagez une solution personnalisée avec Middleware. Voir gérer les redirections à grande échelle pour plus d'informations.

redirects s'exécute avant le Middleware.

`NextResponse.redirect` dans Middleware

Le Middleware permet d'exécuter du code avant qu'une requête soit complétée. Ensuite, en fonction de la requête entrante, redirigez vers une URL différente avec NextResponse.redirect. C'est utile pour rediriger les utilisateurs en fonction d'une condition (ex : authentification, gestion de session) ou pour gérer un grand nombre de redirections.

Par exemple, pour rediriger l'utilisateur vers une page /login s'il n'est pas authentifié :

import { NextResponse, NextRequest } from 'next/server'
import { authenticate } from 'auth-provider'

export function middleware(request: NextRequest) {
  const isAuthenticated = authenticate(request)

  // Si l'utilisateur est authentifié, continuer normalement
  if (isAuthenticated) {
    return NextResponse.next()
  }

  // Rediriger vers la page de login si non authentifié
  return NextResponse.redirect(new URL('/login', request.url))
}

export const config = {
  matcher: '/dashboard/:path*',
}

Bon à savoir :

Le Middleware s'exécute après redirects dans next.config.js et avant le rendu.

Consultez la documentation sur le Middleware pour plus d'informations.

Gérer les redirections à grande échelle (avancé)

Pour gérer un grand nombre de redirections (1000+), vous pouvez envisager une solution personnalisée avec Middleware. Cela permet de gérer les redirections programmatiquement sans avoir à redéployer votre application.

Pour ce faire, vous devrez considérer :

Créer et stocker une carte de redirections.
Optimiser les performances de recherche de données.

Exemple Next.js : Consultez notre exemple Middleware avec filtre de Bloom pour une implémentation des recommandations ci-dessous.

1. Créer et stocker une carte de redirections

Une carte de redirections est une liste de redirections que vous pouvez stocker dans une base de données (généralement un magasin clé-valeur) ou un fichier JSON.

Considérez la structure de données suivante :

{
  "/old": {
    "destination": "/new",
    "permanent": true
  },
  "/blog/post-old": {
    "destination": "/blog/post-new",
    "permanent": true
  }
}

Dans le Middleware, vous pouvez lire depuis une base de données comme Edge Config de Vercel ou Redis, et rediriger l'utilisateur en fonction de la requête entrante :

import { NextResponse, NextRequest } from 'next/server'
import { get } from '@vercel/edge-config'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

export async function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname
  const redirectData = await get(pathname)

  if (redirectData && typeof redirectData === 'string') {
    const redirectEntry: RedirectEntry = JSON.parse(redirectData)
    const statusCode = redirectEntry.permanent ? 308 : 307
    return NextResponse.redirect(redirectEntry.destination, statusCode)
  }

  // Aucune redirection trouvée, continuer sans rediriger
  return NextResponse.next()
}

2. Optimisation des performances de recherche de données

Lire un grand ensemble de données pour chaque requête entrante peut être lent et coûteux. Il existe deux façons d'optimiser les performances de recherche de données :

Utiliser une base de données optimisée pour les lectures rapides
Utiliser une stratégie de recherche de données comme un filtre de Bloom (Bloom filter) pour vérifier efficacement si une redirection existe avant de lire le fichier ou la base de données de redirections plus volumineux.

En reprenant l'exemple précédent, vous pouvez importer un fichier de filtre de Bloom généré dans le Middleware, puis vérifier si le chemin de la requête entrante existe dans le filtre de Bloom.

Si c'est le cas, transférez la requête vers un API Routes qui vérifiera le fichier réel et redirigera l'utilisateur vers l'URL appropriée. Cela évite d'importer un gros fichier de redirections dans le Middleware, ce qui peut ralentir chaque requête entrante.

import { NextResponse, NextRequest } from 'next/server'
import { ScalableBloomFilter } from 'bloom-filters'
import GeneratedBloomFilter from './redirects/bloom-filter.json'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

// Initialiser le filtre de Bloom à partir d'un fichier JSON généré
const bloomFilter = ScalableBloomFilter.fromJSON(GeneratedBloomFilter as any)

export async function middleware(request: NextRequest) {
  // Obtenir le chemin de la requête entrante
  const pathname = request.nextUrl.pathname

  // Vérifier si le chemin est dans le filtre de Bloom
  if (bloomFilter.has(pathname)) {
    // Transférer le chemin vers le Route Handler
    const api = new URL(
      `/api/redirects?pathname=${encodeURIComponent(request.nextUrl.pathname)}`,
      request.nextUrl.origin
    )

    try {
      // Récupérer les données de redirection depuis le Route Handler
      const redirectData = await fetch(api)

      if (redirectData.ok) {
        const redirectEntry: RedirectEntry | undefined =
          await redirectData.json()

        if (redirectEntry) {
          // Déterminer le code de statut
          const statusCode = redirectEntry.permanent ? 308 : 307

          // Rediriger vers la destination
          return NextResponse.redirect(redirectEntry.destination, statusCode)
        }
      }
    } catch (error) {
      console.error(error)
    }
  }

  // Aucune redirection trouvée, continuer la requête sans rediriger
  return NextResponse.next()
}

Ensuite, dans l'API Route :

import type { NextApiRequest, NextApiResponse } from 'next'
import redirects from '@/app/redirects/redirects.json'

type RedirectEntry = {
  destination: string
  permanent: boolean
}

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const pathname = req.query.pathname
  if (!pathname) {
    return res.status(400).json({ message: 'Bad Request' })
  }

  // Obtenir l'entrée de redirection depuis le fichier redirects.json
  const redirect = (redirects as Record<string, RedirectEntry>)[pathname]

  // Gérer les faux positifs du filtre de Bloom
  if (!redirect) {
    return res.status(400).json({ message: 'No redirect' })
  }

  // Retourner l'entrée de redirection
  return res.json(redirect)
}

Bon à savoir :

Pour générer un filtre de Bloom, vous pouvez utiliser une bibliothèque comme bloom-filters.

Vous devriez valider les requêtes faites à votre Route Handler pour prévenir les requêtes malveillantes.

Comment gérer les redirections dans Next.js

Hook useRouter()

redirects dans next.config.js