Next.js Internationalization
next-intl, locale routing, translations, date/time formatting, RTL support, dynamic locale switching
1What is the main role of the middleware.ts file in a Next.js application with next-intl?
What is the main role of the middleware.ts file in a Next.js application with next-intl?
Answer
The next-intl middleware automatically detects the user's locale (via Accept-Language header, cookies, or URL) and redirects to the appropriate URL with the locale prefix. It runs before each request and handles locale negotiation without additional code in components. It's the required entry point to enable i18n routing in Next.js App Router.
2In next-intl, where should translation files be placed for an optimal project structure?
In next-intl, where should translation files be placed for an optimal project structure?
Answer
Translation files are placed in messages/[locale].json at the project root (e.g., messages/fr.json, messages/en.json). This convention facilitates translation discovery and allows next-intl to load them automatically via the i18n configuration. Some projects also use messages/[locale]/ with separate files per namespace for better organization.
3What is the main difference between useTranslations and getTranslations in next-intl?
What is the main difference between useTranslations and getTranslations in next-intl?
Answer
useTranslations is a synchronous React hook for Client Components, while getTranslations is an async function for Server Components. getTranslations allows fetching translations server-side without sending JavaScript to the client, improving performance. useTranslations is necessary for interactive components that require the use client directive.
How to configure supported locales in next-intl?
What is the syntax for using variables in a next-intl translation?
+17 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Styling & CSS-in-JS
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free