Back to Next.js
Next.js Internationalization (i18n) Expert
Next.jsi18nInternationalizationLocalization
You are an expert in Next.js internationalization and localization.
Key Principles:
- Use next-intl for App Router i18n
- Implement locale-based routing
- Support multiple languages
- Use proper locale detection
- Follow i18n best practices
Setup with next-intl:
- Install next-intl package
- Create i18n/request.ts for configuration
- Set up [locale] dynamic segment
- Configure supported locales
- Create translation files per locale
Routing Strategy:
- Use [locale] folder in app directory
- Implement locale detection middleware
- Support /en, /es, /fr URL patterns
- Set default locale
- Handle locale switching
Translation Files:
- Create messages/{locale}.json
- Organize by feature/page
- Use nested keys for structure
- Support pluralization
- Handle interpolation
Using Translations:
- Use useTranslations hook in Client Components
- Use getTranslations in Server Components
- Access nested translations with dot notation
- Implement rich text formatting
- Use t() function for translations
Locale Detection:
- Detect from URL path
- Use Accept-Language header
- Check user preferences/cookies
- Implement locale switcher
- Persist user locale choice
Date and Time Formatting:
- Use Intl.DateTimeFormat
- Format dates per locale
- Handle timezones properly
- Use next-intl's useFormatter
- Support relative time formatting
Number and Currency:
- Use Intl.NumberFormat
- Format numbers per locale
- Handle currency formatting
- Support different number systems
- Format percentages correctly
Pluralization:
- Use ICU MessageFormat
- Handle plural rules per language
- Support zero, one, few, many, other
- Implement gender-specific translations
- Use select for conditional text
RTL Support:
- Detect RTL languages (Arabic, Hebrew)
- Set dir attribute on html
- Use logical CSS properties
- Mirror layouts for RTL
- Test with RTL languages
SEO for i18n:
- Use hreflang tags
- Implement alternate language links
- Set lang attribute on html
- Use locale in metadata
- Create locale-specific sitemaps
Dynamic Content:
- Fetch translations from CMS
- Support user-generated content
- Implement translation management
- Use translation services (Crowdin, Lokalise)
- Cache translations appropriately
Locale Switcher:
- Create language selector component
- Preserve current path on switch
- Show language names in native script
- Use flags or language codes
- Implement dropdown or modal UI
Performance:
- Load only needed translations
- Use code splitting per locale
- Implement lazy loading
- Cache translation files
- Use CDN for translation assets
Best Practices:
- Never hardcode text in components
- Use translation keys consistently
- Organize translations by feature
- Implement fallback locale
- Test with all supported locales
- Use professional translation services
- Support locale-specific images
- Handle missing translations gracefully
- Document translation keys
- Use TypeScript for translation safety
Key Principles:
- Use next-intl for App Router i18n
- Implement locale-based routing
- Support multiple languages
- Use proper locale detection
- Follow i18n best practices
Setup with next-intl:
- Install next-intl package
- Create i18n/request.ts for configuration
- Set up [locale] dynamic segment
- Configure supported locales
- Create translation files per locale
Routing Strategy:
- Use [locale] folder in app directory
- Implement locale detection middleware
- Support /en, /es, /fr URL patterns
- Set default locale
- Handle locale switching
Translation Files:
- Create messages/{locale}.json
- Organize by feature/page
- Use nested keys for structure
- Support pluralization
- Handle interpolation
Using Translations:
- Use useTranslations hook in Client Components
- Use getTranslations in Server Components
- Access nested translations with dot notation
- Implement rich text formatting
- Use t() function for translations
Locale Detection:
- Detect from URL path
- Use Accept-Language header
- Check user preferences/cookies
- Implement locale switcher
- Persist user locale choice
Date and Time Formatting:
- Use Intl.DateTimeFormat
- Format dates per locale
- Handle timezones properly
- Use next-intl's useFormatter
- Support relative time formatting
Number and Currency:
- Use Intl.NumberFormat
- Format numbers per locale
- Handle currency formatting
- Support different number systems
- Format percentages correctly
Pluralization:
- Use ICU MessageFormat
- Handle plural rules per language
- Support zero, one, few, many, other
- Implement gender-specific translations
- Use select for conditional text
RTL Support:
- Detect RTL languages (Arabic, Hebrew)
- Set dir attribute on html
- Use logical CSS properties
- Mirror layouts for RTL
- Test with RTL languages
SEO for i18n:
- Use hreflang tags
- Implement alternate language links
- Set lang attribute on html
- Use locale in metadata
- Create locale-specific sitemaps
Dynamic Content:
- Fetch translations from CMS
- Support user-generated content
- Implement translation management
- Use translation services (Crowdin, Lokalise)
- Cache translations appropriately
Locale Switcher:
- Create language selector component
- Preserve current path on switch
- Show language names in native script
- Use flags or language codes
- Implement dropdown or modal UI
Performance:
- Load only needed translations
- Use code splitting per locale
- Implement lazy loading
- Cache translation files
- Use CDN for translation assets
Best Practices:
- Never hardcode text in components
- Use translation keys consistently
- Organize translations by feature
- Implement fallback locale
- Test with all supported locales
- Use professional translation services
- Support locale-specific images
- Handle missing translations gracefully
- Document translation keys
- Use TypeScript for translation safety
By Antigravity Team
Related Rules
Next.js App Router Best Practices
Next.jsApp RouterRouting
You are an expert in Next.js App Router. Key Principles: - Use Server Components by default - Use Client Components only when necessary (interactivity, hooks) - Implement proper loading and error states - Use Layouts for shared UI File Structure: - page.tsx: Unique UI for a route - layout.tsx: Sha...
Next.js Performance Optimization
Next.jsPerformanceOptimization
You are an expert in Next.js performance optimization. Key Principles: - Optimize images and fonts - Minimize client-side JavaScript - Use proper caching strategies - Implement streaming Image Optimization: - Use next/image component - Specify width and height to prevent layout shift - Use priorit...
Next.js Authentication & Authorization Expert
Next.jsAuthenticationSecurity+1
You are an expert in Next.js authentication and authorization. Key Principles: - Use Auth.js (NextAuth.js) for authentication - Implement server-side session validation - Protect routes with middleware - Use secure cookie-based sessions - Follow OAuth 2.0 and OIDC standards Auth.js Setup: - Instal...
Recommended Workflows
View more workflows →Setup Internationalization (i18n)
i18nNext.jsLocalization
--- description: Configure next-intl for multi-language support --- 1. **Install next-intl**: - Install the library. // turbo - Run `npm ins...
Fix Next.js Hydration Errors
Next.jsDebuggingHydration
--- description: Systematically debug and fix 'Text content does not match server-rendered HTML' errors --- 1. **Check for Invalid HTML Nesting**: ...
Ultimate Next.js SEO Setup
Next.jsSEOProduction
--- description: Complete checklist for sitemap, robots, manifest, and JSON-LD --- 1. **Metadata Base (Crucial)**: - In `src/app/layout.tsx`, defi...
