MkSaaS template supports internationalization by default, allowing you to create localized UI components, email templates, and more to provide a better experience for users worldwide.
MkSaaS template uses JSON files for translations, located in the messages directory. Each language has its own file, following the naming convention [locale].json.
The structure of these files is hierarchical, allowing you to organize translations by feature or component:
messages/en.json
{ "Metadata": { "name": "MkSaaS", "title": "MkSaaS - The Best AI SaaS Boilerplate", "description": "MkSaaS is the best AI SaaS boilerplate. Make AI SaaS in days, simply and effortlessly" }, "Common": { "login": "Log in", "logout": "Log out", "signUp": "Sign up", "language":
Both components provide a dropdown selection interface using the Select component from the UI library. You can use either component depending on your needs.
Create a new JSON file in the messages directory with the name of your locale (e.g., fr.json).
You can copy the structure from en.json and translate all values:
messages/fr.json
{ "Metadata": { "name": "MkSaaS", "title": "MkSaaS - Le meilleur modèle SaaS AI", "description": "MkSaaS est le meilleur modèle SaaS AI. Créez un SaaS AI en quelques jours, simplement et sans effort" }, // ... rest of translations}
Update the website configuration:
Add the new locale to your website.tsx configuration:
MkSaaS uses Fumadocs for documentation search functionality with proper internationalization support. For languages with special requirements (like Arabic), you may need to configure additional settings:
src/app/api/search/route.ts
const
For languages like Chinese, the search system uses the Mandarin tokenizer to properly index and search content. This requires special configuration as shown above, with adjusted threshold and tolerance settings for optimal search results.
For a smoother development experience when working with internationalization, we highly recommend installing the i18n-ally extension for your IDE (Visual Studio Code, Cursor, etc.).
This powerful extension provides several benefits for multilingual application development:
Inline Translation Preview: See translations directly in your code
Missing Translation Detection: Highlights keys that are missing translations in certain languages
Quick Translation Creation: Add new translations quickly with keyboard shortcuts
Translation Management: Sort, rename, and refactor translation keys with ease
Multiple Framework Support: Works with many i18n frameworks including next-intl
Auto-completion: Suggests translation keys as you type
Hover Information: View translations for all languages when hovering over a key
The extension integrates seamlessly with MkSaaS's internationalization structure and can significantly improve your workflow when managing translations across multiple languages.
After changing the default language to zh, there is a build error [Error: Failed to collect page data for /api/search] { type: 'Error' }.
The reason is that the MkSaaS template uses English as the default language, so the files in the content directory are named using xx.mdx for English and xx.zh.mdx for Chinese.
If you change the default language to Chinese, you need to modify the naming of the files in the content directory. The original xx.mdx should be renamed to xx.en.mdx, and the original xx.zh.mdx should be renamed to xx.mdx.
You can execute the following command in the terminal to batch replace the MDX files in the content directory:
find content -name "*.mdx" -type f | while read file; do if [[ "$file" == *.zh.mdx ]]; then # Change xx.zh.mdx to xx.mdx mv "$file" "${file%.zh.mdx}.mdx" else # Change xx.mdx to xx.en.mdx mv
The system automatically merges translations with the default language, so any missing translations will fall back to the default language (usually English).
i18n: {
defaultLocale: 'en',
locales: {
en: {
flag: '🇺🇸',
name: 'English',
hreflang: 'en',
},
// Remove or comment out other languages
},
},
Keep only the corresponding language file in the messages directory (e.g., en.json).
Both LocaleSelector and LocaleSwitcher components will automatically detect that only one language is configured and will not render in the UI. This ensures your UI remains clean without unnecessary language selection controls when they aren't needed.
searchAPI
=
createI18nSearchAPI
(
'advanced'
, {
// ...
localeMap: {
// Chinese configuration with Mandarin tokenizer
zh: {
components: {
tokenizer: createTokenizer(),
},
search: {
threshold: 0,
tolerance: 0,
},
},
// Use default tokenizers for other languages
en: 'english',
// Add more language-specific configurations as needed
},
// ...
});
"
$file
"
"${
file
%
.
mdx
}.en.mdx"
fi
done
Website Configuration
Configure website settings
:
'🇫🇷'
,
name: 'Français',
hreflang: 'fr',
},
},
},
i18n | MkSaaS - Make Your AI SaaS Product in a Weekend
MkSaaS Docs