Enrutamiento

Todo nuestro contenido debe de ir dentro de la carpeta app/[locale].

Para que el enrutamiento funcione correctamente debemos de apoyarnos de nuestro middleware este middleware se va a encargar de hacer las redirecciones del idioma segun el idioma actual que el usuario elija.

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).*)'],
};

Vamos a configurar nuestras rutas para que sean dinamicas, para ello debemos de añadir la siguiente estructura de carpetas dentro de la carpeta src.

Estructura de carpetas dentro de la carpeta src

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

El contenido de nuestro layout principal es muy basico pero necesario para que funcione todo sin inconvenientes.

src/app/[locale]/layout.tsx

import type { Metadata } from "next";
import "./globals.css"; //Importamos los estilos css

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

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