Internationalization in App Router typically uses dynamic [locale] segments, middleware for locale detection, and dictionary files per language.
Common Interview Questions
Q: Locale segment pattern?
Answer: Prefix all routes with locale. Middleware redirects / to /en or negotiates from Accept-Language header.
app/[locale]/layout.tsx
app/[locale]/page.tsx
Q: Loading translations?
Answer: Dynamic import dictionaries in Server Components. Only ship needed locale bundle per request.
const dict = await import(`@/dictionaries/${locale}.json`);
return <h1>{dict.home.title}</h1>;
Q: hreflang and SEO?
Answer: Emit alternate links per locale in metadata. Use canonical URLs to avoid duplicate content penalties.
Q: RTL support?
Answer: Set dir="rtl" on html element for Arabic/Hebrew. CSS logical properties (margin-inline) simplify mirroring layouts.
Key Points for Interviews
-
Middleware handles locale detection/redirection
-
Colocate dictionaries or use CMS translations
-
generateStaticParams per locale for SSG
-
Format dates/numbers with Intl APIs
-
next-intl is popular community solution