Internationalization

For internationaliztion nextstarter integrates next-intl (opens in a new tab).

💡

Why next-intl:
next-intl is a lightweight internationalization library for Next.js and comes with support for both server and client components in the app router. It also supports automatic language detection and url based language routing.

Usage

Server components

In server components you can use the can get the translate method like so:

import { useTranslations } from 'next-intl';
 
export default function MyServerComponent() {
  const t = useTranslations();
 
  return <div>{t('hello')}</div>;
}

If it is an async function you need to use the getTranslator method instead and pass the locale parameter:

import { getTranslator } from 'next-intl';
 
export default async function MyServerComponent({ params: { locale } }: { params: { locale: string } }) {
  const t = await getTranslator(locale);
 
  return <div>{t('hello')}</div>;
}

Client components

In client components you can use the useTranslations hook like so:

'use client';
import { useTranslations } from 'next-intl';
 
export default function MyClientComponent() {
  const t = useTranslations();
 
  return <div>{t('hello')}</div>;
}

Translations

Translations are stored in the apps/web/locales folder. The default locale is en and the translations are stored in en.json.

{
  "hello": "Hello World!"
}

Add a new locale

To add a new locale you need to create a new file in the apps/web/locales folder with the locale name as the file name. For example fr.json for French.

{
  "hello": "Bonjour le monde!"
}

Then register this locale in the apps/web/config.ts file:

export const appConfig = {
  i18n: {
    locales: ['en', 'de', 'es', 'fr' ] as const,
    defaultLocale: 'en' as const,
    localeLabels: {
      en: 'English',
      es: 'Español',
      de: 'Deutsch',
      fr: 'Français' /* 👈🏼 */,
    },
  },
  // ...
};

UI & Styling Blog