Getting Started the declaration of your content
Configure Intlayer for your project
See how to use intlayer with NextJS
See how to use intlayer with ReactJS
See how to use intlayer with Vite+React
Install Package
Install the necessary packages using npm:
npm install intlayer
yarn install intlayer
pnpm install intlayer
Manage Your Content
Create and manage your content dictionaries:
Using typescript
// src/app/[locale]/page.content.ts
import { t, enu, type DeclarationContent } from "intlayer";
const pageContent: DeclarationContent = {
id: "page",
getStarted: {
main: t({
en: "Get started by editing",
fr: "Commencez par éditer",
es: "Comience por editar",
}),
pageLink: "src/app/page.tsx",
},
nestedContent: {
id: "enumeration",
numberOfCar: enu({
"<-1": "Less than minus one car",
"-1": "Minus one car",
"0": "No cars",
"1": "One car",
">5": "Some cars",
">19": "Many cars",
}),
},
};
// Content should be exported as default
export default pageContent;
Using ECMAScript modules
// src/app/[locale]/page.content.mjs
import { t } from "intlayer";
/** @type {import('intlayer').DeclarationContent} */
const pageContent = {
id: "page",
getStarted: {
main: t({
en: "Get started by editing",
fr: "Commencez par éditer",
es: "Comience por editar",
}),
pageLink: "src/app/page.tsx",
},
nestedContent: {
id: "enumeration",
numberOfCar: enu({
"<-1": "Less than minus one car",
"-1": "Minus one car",
0: "No cars",
1: "One car",
">5": "Some cars",
">19": "Many cars",
}),
},
};
// Content should be exported as default
export default pageContent;
Using CommonJS modules
// src/app/[locale]/page.content.cjs
const { t } = require("intlayer");
/** @type {import('intlayer').DeclarationContent} */
const pageContent = {
id: "page",
getStarted: {
main: t({
en: "Get started by editing",
fr: "Commencez par éditer",
es: "Comience por editar",
}),
pageLink: "src/app/page.tsx",
},
nestedContent: {
id: "enumeration",
numberOfCar: enu({
"<-1": "Less than minus one car",
"-1": "Minus one car",
0: "No cars",
1: "One car",
">5": "Some cars",
">19": "Many cars",
}),
},
};
// Content should be exported as default
module.exports = pageContent;
Using JSON
// src/app/[locale]/page.content.json
{
id: "page",
getStarted: {
main: {
nodeType: "translation",
en: "Get started by editing",
fr: "Commencez par éditer",
es: "Comience por editar",
},
pageLink: "src/app/page.tsx",
},
nestedContent: {
id: "enumeration",
nodeType: "enumeration",
numberOfCar: {
"<-1": "Less than minus one car",
"-1": "Minus one car",
"0": "No cars",
"1": "One car",
">5": "Some cars",
">19": "Many cars",
},
},
}
Warning, JSON content declaration make impossible to implement function fetching