Intlayer: A closer way to translate your application

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

.
├── Component1
│   ├── index.content.ts
│   └── index.tsx
└── Component2
    ├── index.content.ts
    └── index.tsx

// ./Component1/index.content.ts

import { type DeclarationContent, t } from "intlayer";

const component1Content = {
  key: "component1",
  content: {
    myTranslatedContent: t({
      en: "Hello World",
      fr: "Bonjour le monde",
      es: "Hola Mundo",
    }),
  },
} satisfies DeclarationContent;

export default component1Content;

// ./Component1/index.tsx

import { useIntlayer } from "react-intlayer";

export const Component1 = () => {
  const { myTranslatedContent } = useIntlayer("component1");

  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.
• Simplified Setup: Get up and running quickly with minimal configuration, especially optimized for Next.js projects.
• Server Component Support: Perfectly suited for Next.js server components, ensuring smooth server-side rendering.
• Enhanced Routing: Full support for Next.js app routing, adapting seamlessly to complex application structures.
• Interoperability: Allow i18next interoperability. (beta)