Intlayer next js

Skill aymericzip/intlayer-skills/skills/intlayer-next-js

Intlayer Skills are a set of specialized instructions and workflows for AI agents to help them interact with Intlayer projects.

Install

npx -y skills add aymericzip/intlayer-skills --skill intlayer-next-js

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Integrates Intlayer internationalization with Next.js App Router and Pages Router. Use when the user asks to "setup Next.js i18n", use "useIntlayer" in Server Components, or handle client-side translations in Next.js.

SKILL.md

3.7 KB, as published. Nobody here has run it

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>
  );
};