i18n Namespace Organization for Large Translation Files

A single en.json file with thousands of keys becomes hard to maintain and causes unnecessary data to be sent to every page.

Split translations into namespaces by feature or page. Load only the namespaces a page needs.

messages/
  en/
    common.json     # shared: nav, buttons, errors
    home.json       # homepage-specific
    auth.json       # login/signup
    dashboard.json  # dashboard

// next-intl server-side namespace
import { getTranslations } from 'next-intl/server';

export default async function DashboardPage() {
  const t = await getTranslations('dashboard');
  return <h1>{t('title')}</h1>;
}

// react-i18next hook
import { useTranslation } from 'react-i18next';

function Dashboard() {
  const { t } = useTranslation('dashboard');
  return <h1>{t('title')}</h1>;
}

Namespaces reduce bundle size by shipping only the strings a user needs for the current view. They also make ownership clear: each team owns their namespace file.