Intlayer

Intlayer: A tailored way to translate your website

Intlayer offers a more flexible and modern approach to internationalization (i18n). Its seamless integration with Next.js, React, Vite and Express, customizable configuration, and support for various content declaration formats, such as TypeScript make it a powerful choice for internationalization.

Key Benefits of Intlayer:

• Effortless Dictionary
  Organize and maintain your multilingual content efficiently by declaring content dictionaries directly alongside your components. This not only reduces complexity but also improves maintainability.
  Learn more about content declaration

• Seamless Integration with Next.js, React, and Express
  Intlayer is designed to work flawlessly with Next.js and React, supporting features like server-side rendering, dynamic routing, and client-side rendering. This makes it the perfect choice for developers building modern web applications.
  Explore Next.js integration
  Explore React integration Explore Express integration

• Simplified Content Management for Non-Developers
  With the command npm intlayer push, you can externalize content management, making it accessible to non-developer teams. Intlayer includes a free Content Management System (CMS), enabling your team to manage translations effortlessly.
  Learn about Intlayer CLI

• AI-Powered Translation
  Transform your website into 231 languages with just one click using Intlayer’s advanced AI-powered translation tools. This feature simplifies the translation process and ensures global reach.
  Learn about Intlayer CLI
  Learn about Intlayer Editor

• Optimized for Server Components
  Intlayer seamlessly supports React Server Components, enabling efficient internationalization in modern server-rendered applications. This ensures faster load times and improved SEO performance while maintaining a consistent multilingual experience across your app.
  Learn more about Server Components

• Enhanced Developer Experience with TypeScript
  With full TypeScript support, Intlayer enables type-safe content definitions, improving code quality and boosting developer productivity.

• Powerful Customization Options
  Tailor Intlayer to meet your project’s unique needs. Adjust settings for internationalization, middleware, and content handling with ease.
  Discover how to configure Intlayer

Start your journey with Intlayer today and experience a smoother, more powerful approach to internationalization.
Get Started with Intlayer

---

Table of Contents

Explore our comprehensive documentation to get started with Intlayer and learn how to integrate it into your projects.

Get Started

• Introduction

Concept

• How Intlayer Works
• Configuration
• AI provider
• Interest of Intlayer
• Intlayer CLI
• Intlayer Editor
• Intlayer CMS
• Dictionary
  • Per-Locale Content Declaration File
  • Translation
  • Enumeration
  • Condition
  • Nesting
  • Markdown
  • Function Fetching
  • Insertion
  • File

Environment

• Intlayer with Next.js 15
  • Intlayer with Next.js 14 (App Router)
  • Intlayer with Next.js Page Router
• Intlayer with React CRA
• Intlayer with Vite and React
• Intlayer with React Native
• Intlayer with Lynx and React
• Intlayer with Express

Packages

intlayer

• Package
  • getConfiguration
  • getHTMLTextDir
  • getLocaleLang
  • getLocaleName
  • getLocalizedUrl
  • getMultilingualUrls
  • getPathWithoutLocale
  • getTranslation
  • getEnumeration

express-intlayer

• Package
  • t

react-intlayer

• Package
  • t
  • useIntlayer
  • useDictionary
  • useLocale

next-intlayer

• Package
  • t
  • useIntlayer
  • useDictionary
  • useLocale

vite-intlayer

• Package

lynx-intlayer

• Package

react-native-intlayer

• Package

react-scripts-intlayer

• Package

vue-intlayer

• Package

svelte-intlayer

• Package

solid-intlayer

• Package

angular-intlayer

• Package

preact-intlayer

• Package

Blog

• What is i18n
• i18n and SEO
• Intlayer and i18next
• Intlayer and react-intl
• Intlayer and next-intl
• Intlayer and react-intl

---

Live tutorial on YouTube

Contribution

For more detailed guidelines on contributing to this project, please refer to the CONTRIBUTING.md file. It contains essential information on our development process, commit message conventions, and release procedures. Your contributions are valuable to us, and we appreciate your efforts in making this project better!