What is Intlayer Next.js usage?

It integrates Intlayer i18n with Next.js App Router and Pages Router, enabling component-level translations declared adjacent to components.

How do I declare translations?

Create a .content.ts file near the component using t() to define language dictionaries, and ensure the key matches what you pass to useIntlayer().

Which providers do I use for server vs client?

Server Components use IntlayerServerProvider with useIntlayer from next-intlayer/server; Client Components use useIntlayer from next-intlayer and wrap the tree with IntlayerClientProvider.

intlayer-next-js

npx machina-cli add skill aymericzip/intlayer-skills/intlayer-next-js --openclaw

Files (1)

SKILL.md

3.7 KB

Intlayer Next.js Usage

Core Philosophy

Intlayer promotes Component-Level Content Declaration. Instead of a massive global translation file, content is declared in *.content.ts files adjacent to the Next.js components that use them.

Workflow

To create a translated component, you need two files:

Declaration: A content file (e.g., myComponent.content.ts) defining the dictionary.
Implementation: A Next.js component (Server or Client) using the useIntlayer hook.

1. Declare Content

Create a content file using t() for translations. File: src/components/MyComponent/myComponent.content.ts

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

const content = {
  // The 'key' must be unique and matches what you pass to useIntlayer()
  key: "my-component",
  content: {
    text: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Hola",
    }),
  },
} satisfies Dictionary;

export default content;

Setup

Server Components

To use Intlayer in Server Components, use IntlayerServerProvider to provide the locale and useIntlayer from next-intlayer/server.

import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";

const MyServerComponent = () => {
  const content = useIntlayer("my-component");
  return (
    <div>
      <h1>{content.text}</h1>
    </div>
  );
};

const Page = async ({ params }) => {
  const { locale } = await params;
  return (
    <IntlayerServerProvider locale={locale}>
      <MyServerComponent />
    </IntlayerServerProvider>
  );
};

export default Page;

Client Components

For Client Components, add the "use client" directive and use useIntlayer from next-intlayer. Ensure the component is wrapped in an IntlayerClientProvider.

"use client";

import { useIntlayer } from "next-intlayer";

export const MyClientComponent = () => {
  const content = useIntlayer("my-component");

  return (
    <div>
      <h1>{content.text}</h1>
    </div>
  );
};

Next.js package Documentation

References

Website
Doc

Environments

Packages

Source

git clone https://github.com/aymericzip/intlayer-skills/blob/main/skills/intlayer-next-js/SKILL.mdView on GitHub

Overview

Integrates Intlayer internationalization with Next.js App Router and Pages Router. It uses component-level content declarations via *.content.ts files and the useIntlayer hook for both server and client components, enabling scalable, per-component translations.

How This Skill Works

Translations are declared in a content file using t() and a unique key. At runtime, useIntlayer('your-key') fetches the translated content. Server Components rely on IntlayerServerProvider to set locale, while Client Components use useIntlayer with a wrapped IntlayerClientProvider to enable on-demand translations.

When to Use It

Setting up Next.js i18n for a project
Declaring component-level translations adjacent to components
Working with Next.js App Router or Pages Router in a multilingual app
Rendering translations in Server Components with locale from the route
Implementing Client Components that load translations dynamically

Quick Start

Step 1: Create a content file beside your component (e.g., myComponent.content.ts) and define translations with t().
Step 2: Implement the component and call const content = useIntlayer('my-component') to read translations.
Step 3: For Server Components, wrap with IntlayerServerProvider and pass locale; for Client Components, use 'use client' and wrap with IntlayerClientProvider.

Best Practices

Place a *.content.ts translation file next to each component that uses translations
Define translations with t() and ensure the 'key' matches useIntlayer() calls
Keep component keys unique to avoid conflicts across the app
In Server Components, wrap with IntlayerServerProvider and pass locale from the route params
In Client Components, add 'use client' and wrap with IntlayerClientProvider

Example Use Cases

Create src/components/MyComponent/myComponent.content.ts using t({ en: 'Welcome', fr: 'Bienvenue' }) and use useIntlayer('my-component') in the component
Server Component: wrap with IntlayerServerProvider locale from route params and render content[0] via useIntlayer('my-component')
Client Component: 'use client' file, import { useIntlayer } from 'next-intlayer', and display translations with content.text
App Router page demonstrates per-locale rendering by providing locale to IntlayerServerProvider and mounting MyServerComponent
No Locale Path scenario: configure Next.js environment and providers as described in the Next Intlayer exports docs to handle translations without locale paths

Frequently Asked Questions

Add this skill to your agents