How do you handle internationalization (i18n) in Next.js with the App Router?
Interviewer Expectations for this Question
01
Core Competency
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
02
Evaluation Criteria
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Comprehensive Model Answer
Verified Solution
Next.js provides built-in support for internationalization (i18n) in the App Router. You can configure i18n settings in the next.config.js file.
// next.config.js
module.exports = {
i18n: {
locales: ["en", "fr", "de"],
defaultLocale: "en",
},
};
You can then create localized content by using dynamic route segments for different languages.
app/
├── [locale]/
│ ├── page.js // Localized home page
│ └── about/
│ └── page.js // Localized about page
jsx
// app/[locale]/page.js
import { useRouter } from "next/router";
export default function HomePage() {
const { locale } = useRouter();
return <div>Welcome to the {locale} version of the site!</div>;
}
You can also use libraries like next-translate or react-i18next for more advanced i18n features.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.