Internationalization
Learn how to implement and use internationalization in your Launch Express project with next-intl
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 in src/i18n/request.ts
:
Translation Files
Translation messages are stored in JSON files in the locales
directory, organized by locale:
Each translation file follows this structure:
Using Translations in Components
Client Components
For client components, use the useTranslations
hook:
Server Components
For server components, use the getTranslations
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:
Then in your component:
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
This approach allows you to rapidly add new languages to your application without the need for manual translation of every string, saving significant time and effort while maintaining high-quality translations.
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