Routage

Tout notre contenu doit être dans le dossier app/[locale].

Pour que le routage fonctionne correctement, nous devons nous appuyer sur notre middleware. Ce middleware s'occupera de faire les redirections de langue selon la langue actuelle choisie par l'utilisateur.

src/middleware.ts

import { NextRequest } from 'next/server';
import { langMiddleware } from 'translate-projects-nextjs/middleware';
import { i18nConfig } from './i18nConfig';

export function middleware(request: NextRequest) {
    return langMiddleware({
        request,
        locales: i18nConfig.locales,
        defaultLocale: i18nConfig.defaultLocale,
    })
}

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

Nous allons configurer nos routes pour qu'elles soient dynamiques, pour cela nous devons ajouter la structure de dossiers suivante dans le dossier src.

Structure des dossiers dans le dossier src

.
├── app
│   ├── [locale]
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx

Le contenu de notre layout principal est très basique mais nécessaire pour que tout fonctionne sans problèmes.

src/app/[locale]/layout.tsx

import type { Metadata } from "next";
import "./globals.css"; //Nous importons les styles css.

export const metadata: Metadata = {
  title: "Translate Projects Nextjs",
  description: "Translate Projects Nextjs",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return  children;
}