next-intl-app-router

To add locale-prefixed routing and translations in a Next.js App Router app, configure next-intl by wrapping your next.config.ts with createNextIntlPlugin, defining locales in routing.ts, and wiring NextIntlClientProvider into your layout. This setup enables navigation to paths like /en/about and /ja/about with dynamic message loading.

Dynamic message loading for server and client components works by setting the request locale at the correct lifecycle points using setRequestLocale and loading per-locale JSON files. The layout then integrates NextIntlClientProvider with getMessages to ensure correct translation usage across the application.

Yes, middleware is required for next-intl i18n routing to work consistently. The setup involves configuring a middleware/proxy layer that handles locale detection and routing, ensuring users are directed to the correct locale-prefixed URLs across the application.

The correct setup order for setRequestLocale requires calling it at the right lifecycle points within your Next.js layout or page components. This ordering ensures that the server-side request locale is established before rendering, enabling accurate translation rendering for internationalized routes.

Yes, you can load locale messages from a per-locale JSON directory by configuring src/i18n/request.ts to fetch messages/${locale}.json. This approach dynamically loads the correct locale messages and supplies them to the application via getMessages.

Translations may not display correctly if setRequestLocale ordering is incorrect or NextIntlClientProvider integration is missing. Ensure your layout uses getMessages to pass translations to the provider and that createNextIntlPlugin properly wraps your next.config.ts file.