React Intlayer - Content as Code for React

Why React Intlayer?

React Intlayer introduces a "Content as Code" paradigm to internationalization. Instead of maintaining external JSON files that can easily go out of sync with your code, Intlayer allows you to define content in JavaScript/TypeScript files (.content.ts) using strict schemas.

Structured Content: It goes beyond simple string replacement. You can define complex objects, arrays, and rich text structures that are fully typed.
Zero-Cost Abstraction: It transpiles your content declarations into optimized dictionaries, ensuring high performance at runtime.
Server Components (RSC) Ready: Designed with Next.js App Router in mind, it allows you to fetch and render translations on the server without client-side waterfalls.
Content Declaration: Translation files can be co-located with components (feature-based architecture) or centralized, giving you architectural flexibility.
SEO Built-in: It includes utilities specifically for managing localized metadata, sitemaps, and hreflang tags automatically.

Code Snippet

Defining a typed content dictionary and consuming it in a component.

// 1. Content Declaration (components/Hero/hero.content.ts)
import { t, type Dictionary } from 'intlayer';

const heroContent = {
  key: 'hero-section',
  content: {
    title: t({
      en: 'Welcome to our Platform',
      fr: 'Bienvenue sur notre plateforme',
      es: 'Bienvenido a nuestra plataforma',
    }),
    actions: {
      primary: t({
        en: 'Get Started',
        fr: 'Commencer',
        es: 'Empezar',
      }),
    }
  },
} satisfies Dictionary;

export default heroContent;

// 2. Consumption (components/Hero/index.tsx)
import { useIntlayer } from 'react-intlayer';

export const Hero = () => {
  // TypeScript knows exactly what 'hero-section' contains
  const { title, actions } = useIntlayer('hero-section');

  return (
    <section>
      <h1>{title}</h1>
      <button>{actions.primary}</button>
    </section>
  );
};

In this workflow, adding a new field to the content dictionary immediately makes it available in the component with autocomplete. If you forget a language in the declaration, TypeScript (and the build tool) can warn you.

Pros and Cons

No library is perfect; understanding the trade-offs is key to selecting the right tool.

Pros

Developer Experience: Full TypeScript integration means you get autocomplete for your content keys. No more guessing if it's home.title or home_page.title.
Flexibility: Handles markdown, rich text, and arbitrary data structures (like a list of testimonials) natively.
Maintenance: Co-locating translations with components makes deleting old code safer—delete the component, and you delete its translations too.

Cons

Verbosity: Defining content dictionaries in TypeScript is more verbose than simple Key-Value JSON files.
Build Complexity: Requires an integrated build step / watcher to generate the types and dictionaries from your content files.
Adoption: As a newer solution introducing a specific "CMS-like" philosophy, it requires a mental shift from the traditional t('key') pattern.

Comparison with Other I18n Libraries

The table below outlines the positioning differences between React Intlayer and other popular I18n libraries to help you make an informed decision:

Library	Design Philosophy	Best For	Pain Points
React Intlayer	Content as Code Structured, typed dictionaries defined alongside components.	Complex Apps Projects needing rich content structures (objects/arrays) and type safety.	Setup Higher initial configuration overhead to get the build pipeline running.
react-i18next	Runtime Flexibility The classic key-value store loaded at runtime.	Standard Needs Most standard web apps where simple string translation is enough.	Loose Types Keeping JSON files in sync with code usage can be error-prone.
Paraglide JS	Compiler Performance Compiles messages to functions for max speed.	Performance Apps optimizing for the smallest possible bundle size.	Data Limits Less suited for managing complex nested data structures compared to Intlayer.

Verdict: When to Adopt

Choose React Intlayer if you prefer strict typing and structured data over loose JSON files. It is particularly powerful for Next.js applications using Server Components, where you want to manage not just simple text, but entire content blocks (titles, descriptions, image alt tags) in a centralized, type-safe schema. It effectively acts as a file-based CMS for your internationalized content.

TL;DR