i18n

To add multilingual UI translation in Next.js, you use next-intl with structured message files like messages/ko.json and messages/en.json. The useTranslations hook looks up text at runtime to render the correct locale for your interface.

Switching between Korean and English in Next.js is handled via next-intl locale management. You structure your translations in messages/ko.json and messages/en.json, and the runtime switches the displayed text based on the active locale.

You need next-intl to enable runtime multilingual text lookups using the useTranslations hook. It requires wrapping your app with NextIntlProvider and maintaining structured message files to drive the translations.

Runtime translation lookup with useTranslations works by reading key-value pairs from your structured message catalogs, such as messages/ko.json. The hook retrieves the correct string for the active locale during component rendering.

This internationalization approach is specifically designed for Next.js apps using next-intl. It relies on NextIntlProvider and the useTranslations hook to manage message catalogs and runtime locale switching for multilingual support.

Using message catalogs for localization requires maintaining separate JSON files like messages/ko.json for each locale. You must keep all structured files synchronized and ensure every translation key exists across every locale to prevent runtime lookup failures.