Intlayer Documentation

Welcome to the Intlayer Documentation. This guide provides an overview of Intlayer, its main features, and how to effectively utilize these documents to enhance your development experience.

Introduction

What is Intlayer?

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.

Intlayer also provides an optional visual editor that allows you to easily edit and manage your content. This editor is particularly useful for developers who prefer a visual interface for content management, or for teams generating content without having to worry about code.

Example of usage

bash

1.
2├── ClientComponent
3│   ├── index.content.ts
4│   └── index.tsx
5└── ServerComponent
6    ├── index.content.ts
7    └── index.tsx

tsx

1// ./ClientComponent/index.content.ts
2
3import { type DeclarationContent, t } from "intlayer";
4
5const clientComponentContent = {
6  key: "client-component",
7  content: {
8    myTranslatedContent: t({
9      en: "Hello World",
10      fr: "Bonjour le monde",
11      es: "Hola Mundo",
12    }),
13  },
14} satisfies DeclarationContent;
15
16export default clientComponentContent;

tsx

1// ./ClientComponent/index.tsx
2"use client";
3
4import { useIntlayer } from "next-intlayer";
5
6export const ClientComponent = () => {
7  const { myTranslatedContent } = useIntlayer("client-component");
8
9  return <span>{myTranslatedContent}</span>;
10};

Main Features

Intlayer offers a variety of features tailored to meet the needs of modern web development. Below are the key features, with links to detailed documentation for each:

Internationalization Support: Enhance your application's global reach with built-in support for internationalization.
Visual Editor: Improve your development workflow with editor plugins designed for Intlayer. Check out the Visual Editor Guide.
Configuration Flexibility: Customize your setup with extensive configuration options detailed in the Configuration Guide.
Advanced CLI Tools: Manage your projects efficiently using Intlayer's command line interface. Explore the capabilities in the CLI Tools Documentation.
Compatibility with i18n: Intlayer works seamlessly with other internationalization libraries. Check out the i18n Guide for more information.

Platforms Supported

Intlayer is designed to work seamlessly with Next.js and React applications. It also supports Vite and Create React App.

Next.js Integration: Utilize the power of Next.js within Intlayer for server-side rendering and static site generation. Details are available in our Next.js Integration Guide.
Vite and React Integration: Leverage Vite within Intlayer for server-side rendering and static site generation. Details are available in our Vite and React Integration Guide.
Create React App Integration: Utilize the power of Create React App within Intlayer for server-side rendering and static site generation. Details are available in our Create React App Integration Guide.

How to Use This Docs

To get the most out of this documentation:

Navigate to Relevant Sections: Use the links provided above to go directly to the sections that address your needs.
Interactive Examples: Where available, utilize interactive examples to see how features work in real-time.
Feedback and Contributions: Your feedback is valuable. If you have suggestions or corrections, please consider contributing to the documentation.

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

How Intlayer Works