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.