Generated code

Default JSON file

The default JSON file is the messages.json files in each language directory.

When the keys are from the default messages.json file, the generated function names are not prefixed with the file name. For example, if you have the following locales/en/messages.json file:

{
  "hello": "Hello"
}

it will be converted to the following TypeScript code:

export const hello = (lang: SupportedLanguage) => {
  // content
};

Which you can import in your components like this:

import { SupportedLanguage } from '@/locales/.generated/types'; // adjust the path to the generated directory
import { hello } from '@/locales/.generated/strings';

export default async function HomePage({
  params,
}: Promise<{ lang: SupportedLanguage }>) {
  const { lang } = await params;
  return <div>{hello(lang)}</div>;
}

Other JSON files

When the keys are from other JSON files, the file name is prefixed to the key. For example, if you have the following locales/en/client.json file:

{
  "hello": "Hello"
}

it will be converted to the following TypeScript code:

export const clientHello = (lang: SupportedLanguage) => {
  // content
};

Which you can import in your components like this:

import { SupportedLanguage } from '@/locales/.generated/types'; // adjust the path to the generated directory
import { clientHello } from '@/locales/.generated/strings';

export default async function HomePage({
  params,
}: Promise<{ lang: SupportedLanguage }>) {
  const { lang } = await params;
  return <div>{clientHello(lang)}</div>;
}

Summary

Every key in the JSON files is converted to camel case convention. The table below summarizes how the generated function names are derived: