Internationalization

NextSaas is built with next-intl for complete internationalization support. It comes with English (en) and Chinese (zh-CN) pre-configured.

Message Files

Translations are stored in the messages directory specifically. We organize messages into separate JSON files for better maintainability (e.g., common, auth, dashboard).

messages/
├── en/
│   ├── common.json
│   ├── auth.json
│   └── ...
└── zh-CN/
    ├── common.json
    ├── auth.json
    └── ...

In src/i18n/request.ts, we dynamically load and merge these files:

// src/i18n/request.ts
export default getRequestConfig(async ({ requestLocale }) => {
  // ...
  return {
    messages: {
      ...(await import(`../../messages/${locale}/common.json`)).default,
      ...(await import(`../../messages/${locale}/sign.json`)).default,
      // ...
    },
  };
});

Adding a New Language

To add a new language (e.g., Japanese ja):

1. Create message files: Create a messages/ja directory and copy the JSON files from en. Translate the content.

2. Update Routing: Edit src/i18n/routing.ts to include the new locale.

   export const locales = [defaultLocale, "zh-CN", "ja"];

3. Update Middleware: The middleware in src/middleware.ts automatically handles the routing based on routing.ts.

Using Translations

In Components

Use the useTranslations hook to access messages.

import { useTranslations } from "next-intl";

export default function Welcome() {
  const t = useTranslations("Common"); // "Common" corresponds to key in merged messages

  return <h1>{t("welcome")}</h1>;
}

In Server Components

You can use getTranslations for async server components.

import { getTranslations } from "next-intl/server";

export default async function Page() {
  const t = await getTranslations("Metadata");
  return {
    title: t("title"),
  };
}