Internationalization (i18n)

Build multi-language applications with next-intl, localized routing, and translation management.

30 min

3 sections

i18n

localization

translations

01. Setting Up next-intl

Section 1 of 3

Configure next-intl for internationalization with message files and localized routing.

typescript

// i18n.ts
import { notFound } from 'next/navigation';
import { getRequestConfig } from 'next-intl/server';

const locales = ['en', 'es', 'fr'];

export default getRequestConfig(async ({ locale }) => {
  if (!locales.includes(locale as any)) notFound();

  return {
    messages: (await import(`../../messages/${locale}.json`)).default,
  };
});

Exercise

Add Language Support

Practice

Set up basic i18n with two languages (en, es) and create message files.

Proxy Request Boundaries

Proxy and Request Boundaries

Back to Course