Skip to main content

Internationalization (i18n)

The website is fully localized using next-intl.

Routing Strategy​

We use Sub-path Routing strategy:

  • /en/about -> English
  • /fr/about -> French

This is handled by the middleware.ts which detects the user's preferred language (Accept-Language header) and redirects them if necessary.

File Structure​

All visible pages are wrapped in a [locale] directory.

src/app/
└── [locale]/
    ├── layout.tsx  # Server: Loads messages for the locale
    ├── page.tsx    # Homepage
    └── blog/...

Messages​

Translations are stored in messages/en.json and messages/fr.json. We access them in components using the useTranslations hook.

import { useTranslations } from "next-intl";

export default function Hero() {
  const t = useTranslations("Hero");
  return <h1>{t("title")}</h1>;
}