Intlayer: Next-Level Content Management in JavaScript
Intlayer is an internationalization library designed specifically for JavaScript developers. It allow the declaration of your content everywhere in your code. It converts declaration of multilingual content into structured dictionaries to integrate easily in your code. Using TypeScript, Intlayer make your development stronger and more efficient.
Example of usage
.
├── ClientComponent
│ ├── index.content.ts
│ └── index.tsx
└── ServerComponent
├── index.content.ts
└── index.tsx
import { DeclarationContent, t } from "intlayer";
const clientComponentContent = {
key: "client-component",
content: {
myTranslatedContent: t({
en: "Hello World",
fr: "Bonjour le monde",
es: "Hola Mundo",
}),
},
} satisfies DeclarationContent;
export default clientComponentContent;
"use client";
import { useIntlayer } from "next-intlayer";
export const ClientComponent = () => {
const { myTranslatedContent } = useIntlayer("client-component");
return <span>{myTranslatedContent}</span>;
};
Why Choose Intlayer?
- JavaScript-Powered Content Management: Harness the flexibility of JavaScript to define and manage your content efficiently.
- Type-Safe Environment: Leverage TypeScript to ensure all your content definitions are precise and error-free.
- Integrated Content Files: Keep your translations close to their respective components, enhancing maintainability and clarity.
intlayer package
intlayer
package intend to declare your content in a structured way, using JavaScript.
To build dictionaries from this declaration, you can use intlayer-cli.
And to interpret intlayer dictionaries you can interpreters, such as react-intlayer, or next-intlayer
Getting Started with Intlayer
See how to use intlayer with NextJS
Install Package
Install the necessary packages using npm:
npm install intlayer
yarn add intlayer
pnpm add intlayer
Manage Your Content
Create and manage your content dictionaries:
Using typescript
import { t, enu, type DeclarationContent } from "intlayer";
const pageContent = {
key: "page",
content: {
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",
}),
},
},
} satisfies DeclarationContent;
export default pageContent;
Using ECMAScript modules
import { t } from "intlayer";
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",
}),
},
};
export default pageContent;
Using CommonJS modules
const { t } = require("intlayer");
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",
}),
},
};
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",
},
},
}
This version emphasizes ease of use, practical steps, and the professional application of Intlayer in a Next.js environment.