Why i18n matters in NextJS

Introduction

i18n helps your app speak many languages so more people can use it easily.

You want users from different countries to read your app in their own language.

Your app needs to show dates, numbers, or currencies in local formats.

You want to grow your app's audience globally without making separate versions.

You want to improve user experience by respecting cultural differences.

Your app needs to support right-to-left languages like Arabic or Hebrew.

Syntax

NextJS

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

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

Use useTranslations hook to get translated text by keys.

Translation keys are organized by namespaces like 'Home' for clarity.

Examples

Shows how to get a greeting text from the 'Header' namespace.

NextJS

const t = useTranslations('Header');
return <p>{t('greeting')}</p>;

Access the current language code like 'en' or 'fr' from the router.

NextJS

const { locale } = useRouter();
console.log(locale);

Sample Program

This component shows a greeting and introduction text using i18n keys.

NextJS

import { useTranslations } from 'next-intl';

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

// Example translation JSON for English (en):
// {
//   "hello": "Hello!",
//   "intro": "Welcome to our app."
// }

Important Notes

Always keep your translation keys clear and consistent.

Test your app in different languages to catch layout or text issues.

Use fallback languages to avoid missing text errors.

Summary

i18n makes your app usable by people worldwide.

It handles language, date, number, and cultural differences.

Next.js provides easy tools like useTranslations to add i18n.