Routing

All our content must go inside the folder app/[locale].

For routing to work correctly, we must rely on our middleware; this middleware will handle language redirections according to the current language chosen by the user.

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

We are going to configure our routes to be dynamic; for this, we need to add the following folder structure inside the src folder.

Folder structure within the src folder

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

The content of our main layout is very basic but necessary for everything to function smoothly.

src/app/[locale]/layout.tsx

import type { Metadata } from "next";
import "./globals.css"; //We import the CSS styles.

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

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