First translations

Let's set up next-intl and our first translations.

Notes

Getting started with next-intl involves the following steps:

Adding translation messages to a JSON file
Defining a request config to load messages
Setting up the next-intl plugin
Using translations in components

Here's how you can do it:

Next lesson

Server & Client Components

Learn how to use translations both on the server as well as the client side.

Start lesson

messages/en-US.json

{
  "heroTitle": "Wild at heart, green by choice"
}

src/i18n/request.ts

import {getRequestConfig} from 'next-intl/server';

export default getRequestConfig(async () => {
  // Static for now, will be adapted later
  const locale = 'en-US';

  // Load messages from the filesystem
  const messages = (await import(`../../messages/${locale}.json`)).default;

  return {
    locale,
    messages
  };
});

next.config.ts

import createNextIntlPlugin from 'next-intl/plugin';

// ...

const withNextIntl = createNextIntlPlugin();
export default withNextIntl(withMDX(nextConfig));

src/app/Hero.tsx

import {useTranslations} from 'next-intl';

export default function Hero() {
  const t = useTranslations();

  return (
    <section>
      <h1>{t('heroTitle')}</h1>
      {/* ... */}
    </section>
  );
}