Nested keys - Simple i18n Next

You can use nested keys in your messages.json file. The keys are converted to camelCase convention. For example, if you have the following locales/en/messages.json file:

locales/en/messages.json

{
  "page": {
    "title": "Page title",
    "section": {
      "title": "Section title"
    }
  }
}

and a locales/de/messages.json file that contains the following content:

locales/de/messages.json

{
  "page": {
    "title": "Seitentitel",
    "section": {
      "title": "Sektionentitel"
    }
  }
}

Then in your React component, you can use the nested key like this:

page.tsx

import { SupportedLanguage } from '@/locales/.generated/types';
import { pageTitle, pageSectionTitle } from 'locales/.generated/strings';

export default function HomePage({
  params: { lang },
}: {
  params: { lang: SupportedLanguage };
}) {
  return (
    <div>
      <h1>{pageTitle(lang)}</h1>
      <h2>{pageSectionTitle(lang)}</h2>
    </div>
  );
}