51 lines
1.4 KiB
Markdown
51 lines
1.4 KiB
Markdown
|
# 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)
|
||
|
|
|
||
|
|
```typescript jsx
|
||
|
|
// 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} />;
|
||
|
|
// ...
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```typescript jsx
|
||
|
|
// component.client.tsx
|
||
|
|
"use client";
|
||
|
|
|
||
|
|
export default function CSC({ i18n }: GeneralI18nProps) {
|
||
|
|
const { dict } = i18n;
|
||
|
|
|
||
|
|
// use dict like plain object here
|
||
|
|
}
|
||
|
|
```
|