i18n files

Inside this folder, the first folder level is locale code such as en-US, and in it has A LOT of json files the naming convention is:

• Global data is in the $.json file.
• For specific page data:
  • index page is corresponding to _.json file
  • other pages just use pathname without trailing slash and locale segment, and replace all / with _(cause in some filesystem / is illegal charactor in pathname). such as _foo.json for /foo/, _foo_bar.json for /foo/bar/ . I think you get the idea.

HOW TO USE IN RSC(React server component)

// page.server.tsx
import { getAppData } from "@/i18n";
import CSC from "./component.client.tsx";

async function RscFoo() {
  // ...
  const { locale, pathname, i18n } = await getAppData();
  const t = i18n.tFactory("/");
  // t is a function takes key and give you value in the json file
  t("title"); // will be "Streamline your prompt design"

  // you can also access global data by
  const g = i18n.g;

  const i18nProps: GeneralI18nProps = {
    locale,
    pathname,
    i18n: {
      dict: i18n.dict,
    },
  };

  // use i18n in CSC (client side component)
  return <CSC {...i18nProps} />;
  // ...
}

// component.client.tsx
"use client";

export default function CSC({ i18n }: GeneralI18nProps) {
  const { dict } = i18n;

  // use dict like plain object here
}