Problem Statement
How do you implement internationalization in Next.js App Router and what are the best practices?
Explanation
In App Router, implement i18n using the [lang] dynamic segment approach since built-in i18n routing was removed, creating app/[lang]/layout.js and app/[lang]/page.js to handle different locales with the lang parameter.
Use middleware to detect user's preferred locale from Accept-Language header or cookies and redirect to appropriate locale, implement locale switcher that updates the URL and stores preference in cookies, and organize translation files by locale in dictionaries directory.
Create a getDictionary function that dynamically imports translation JSON files based on locale for server components, use React context for translations in client components, and implement type-safe translations with TypeScript for autocomplete and error checking.
Best practices include using professional translation services or tools like Crowdin for managing translations at scale, implementing proper hreflang tags for SEO, handling right-to-left languages with proper CSS and dir attributes, storing user's locale preference in cookies for persistence, and falling back gracefully to default locale when translations are missing.
Consider using libraries like next-intl or next-i18next for more robust features if managing translations manually becomes complex.