mcpField
I
intlayer-next-js

intlayer-next-js

github.com/aymericzipDevelopment539 installsUpdated 4w ago
Repository

About intlayer-next-js

intlayer-next-js is a usage skill for Intlayer in Next.js projects, intended for developers implementing localized content. It emphasizes declaring dictionaries beside the components that use them and describes separate setup patterns for Server Components and Client Components.

Key features

  1. 01Declare translations beside components
  2. 02Define dictionaries with t()
  3. 03Server Components usage pattern
  4. 04Client Components usage pattern
  5. 05Coverage for Next.js 14 and 15

Use cases

  1. 01Create translated content for Next.js components
  2. 02Read localized content in server components
  3. 03Use useIntlayer in client components
  4. 04Set up Intlayer in a Next.js project

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/aymericzip/intlayer-skills --skill intlayer-next-js

After installing, type/intlayer-next-jsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

LICENCE.md
references/
environment_nextjs_14.md
environment_nextjs_15.md
environment_nextjs_next-with-page-router.md
environment_nextjs_no-locale-path.md
environment_nextjs.md
packages_intlayer_exports.md
packages_next-intlayer_exports.md
packages_next-intlayer_intlayerMiddleware.md
packages_next-intlayer_t.md
packages_next-intlayer_useDictionary.md
packages_next-intlayer_useIntlayer.md
packages_next-intlayer_useLocale.md

Details

From the project README

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:

  1. Declaration: A content file (e.g., myComponent.content.ts) defining the dictionary.
  2. 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

Environments
Packages

Comments

Markdown supported