Internationalization with next-intl
Launch Express comes with built-in internationalization support using next-intl, making it easy to create multilingual applications. This guide will help you understand how to use and configure internationalization in your project.Overview
Internationalization (i18n) allows your application to adapt to different languages and regions. With next-intl, Launch Express provides:- Simple translation management
- Locale-based routing
- Date, number, and time formatting
- RTL (Right-to-Left) language support
- SEO-friendly localized pages
Configuration
Locale Settings
The internationalization settings are configured insrc/i18n/request.ts
:
Translation Files
Translation messages are stored in JSON files in thelocales
directory, organized by locale:
Using Translations in Components
Client Components
For client components, use theuseTranslations
hook:
Server Components
For server components, use thegetTranslations
function:
Formatting Dates, Numbers, and Times
next-intl provides utilities for formatting dates, numbers, and currencies according to the current locale:Handling Dynamic Content
For dynamic content with variables, use placeholders in your translations:SEO Considerations
Metadata for Different Locales
Create locale-specific metadata in your page components:Alternate Links
Add alternate links for different locales in your layout:Adding a New Language
To add a new language to your Launch Express project:- Update the
locales
array insrc/i18n/request.ts
- Create a new translation file in
locales
(e.g.,ja.json
for Japanese) - Translate all the strings from the default locale file
- Restart your development server
Accelerating Translations with Languine.ai
When expanding your application to support multiple languages, manually translating all your content can be time-consuming. Languine.ai offers a powerful solution to streamline this process.How Languine.ai Helps
Languine.ai is a specialized tool for translating locale files that:- Automatically translates your existing locale files to new languages
- Preserves the JSON structure and keys of your original files
- Maintains context-aware translations for more natural results
- Supports a wide range of languages including French, German, Spanish, Chinese, Japanese, and many more
Using Languine.ai with Launch Express
Here’s how to use Languine.ai to quickly expand your language support:- Start with a complete locale file (e.g., your English
en.json
) - Upload your source locale file to Languine.ai
- Select the target languages you want to translate to
- Download the translated locale files
- Place the new files in your
locales
directory - Update your
locales
array in the config file to include the new languages
Best Practices
- Use semantic keys instead of the actual text (e.g.,
welcome_message
instead ofWelcome to our site
) - Group translations by feature or page
- Keep translation files organized and consistent across languages
- Use placeholders for dynamic content
- Consider using a translation management system for larger projects
Troubleshooting
Missing Translations
If a translation is missing, next-intl will fall back to the key name. To debug missing translations, you can enable strict mode in your development environment:Locale Detection
If you’re having issues with locale detection, check:- The middleware configuration in
middleware.ts
- The locale parameter in your page routes
- The
Accept-Language
header handling in your application