docs
Internationalization

Internationalization

💡

Powered by Next.js, the NextSaaS boilerplate enables you to configure the routing and rendering of content to support multiple languages.

How it works

Next.js Internationalization (opens in a new tab)

How it works with NextSaaS boilerplate

NextSaaS dictionaries are saved in src/messages/en.json. By default, there is only one dictionary available. If you want to introduce more, you will need to add the file there and an entry in the src/dictionaries.ts file:

src/dictionaries.ts
import "server-only";
 
const dictionaries = {
  en: () =>
    import("./config/messages/en.json").then((module) => module.default),
  zh: () =>
    import("./config/messages/zh.json").then((module) => module.default),
};

To access the message, NextSaaS provides two APIs:

  • useDictionary(): to access messages in client-side components.
  • getDictionary(): to access messages in server-side components.

Routing can be internationalized by either the sub-path (/fr/products) or domain (my-site.fr/products).

The NextSaaS boilerplate doesn't come with internationalized routing, but you can implement either of them in your application.