Content translation management in NextJS

Introduction

Content translation management helps your website show text in different languages. It makes your site friendly for people from many countries.

You want to show your website in English and Spanish.

Your app needs to support users from different countries with their own languages.

You want to easily add new languages without changing much code.

You want to keep translations organized and easy to update.

You want to detect user language and show content automatically.

Syntax

NextJS

import { useRouter } from 'next/router';
import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations('Namespace');
  return <p>{t('key')}</p>;
}

Use useTranslations hook to get translated text by keys.

Namespaces help organize translation keys by page or feature.

Examples

This example shows how to translate a welcome message on the Home page.

NextJS

import { useTranslations } from 'next-intl';

export default function Home() {
  const t = useTranslations('Home');
  return <h1>{t('welcome')}</h1>;
}

This loads the correct translation file based on the user's language.

NextJS

export async function getStaticProps({ locale }) {
  return {
    props: {
      messages: (await import(`../locales/${locale}.json`)).default
    }
  };
}

You can pass variables to translations for personalized messages.

NextJS

<p>{t('greeting', { name: 'Anna' })}</p>

Sample Program

This component shows a greeting message and introduction text in the user's language. The translations are loaded from JSON files based on the locale.

NextJS

import { useTranslations } from 'next-intl';

export default function Greeting() {
  const t = useTranslations('Greeting');
  return (
    <main>
      <h1>{t('hello')}</h1>
      <p>{t('intro')}</p>
    </main>
  );
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      messages: (await import(`../locales/${locale}.json`)).default
    }
  };
}

Important Notes

Keep translation keys simple and consistent.

Use JSON files to store translations for each language.

Test your site in different languages to check layout and text length.

Summary

Content translation management helps show your site in many languages.

Use useTranslations hook and JSON files for easy translations.

Load translations based on user language for a friendly experience.