Aller au contenu principal

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;
}