Internationalization

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:

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 easily implement either of them in your application. You can configure the routing in next.config.js. Refer to Internationalized Routing (opens in a new tab) for more details.