next-intlayer v2.0.0

Intlayer: Next-Level Content Management in JavaScript

Intlayer is an innovative Content Management System (CMS) designed specifically for JavaScript developers. It enables seamless transpilation of JavaScript content into structured dictionaries, making integration into your codebase straightforward and efficient.

Why Choose Intlayer?

• JavaScript-Powered Content Management: Harness the flexibility of JavaScript to define and manage your content efficiently.
• Type-Safe Environment: Leverage TypeScript to ensure all your content definitions are precise and error-free.
• Integrated Content Files: Keep your translations close to their respective components, enhancing maintainability and clarity.
• Simplified Setup: Get up and running quickly with minimal configuration, especially optimized for Next.js projects.
• Server Component Support: Perfectly suited for Next.js server components, ensuring smooth server-side rendering.
• Enhanced Routing: Full support for Next.js app routing, adapting seamlessly to complex application structures.

Getting Started with Intlayer

Setting up Intlayer in a Next.js application is straightforward:

Step 1: Install Dependencies

Install the necessary packages using npm:

npm install intlayer next-intlayer

yarn install intlayer next-intlayer

pnpm install intlayer next-intlayer

Step 2: Integrate Intlayer in Your Next.js Configuration

Configure your Next.js setup to use Intlayer:

// next.config.mjs
import { withIntlayer } from "next-intlayer/server";

const nextConfig = {};

export default withIntlayer(nextConfig);

Step 3: Configure Middleware for Locale Detection

Set up middleware to detect the user's preferred locale:

// src/middleware.ts
export { intlayerMiddleware as middleware } from 'next-intlayer/middleware';

export const config = {
  matcher: '/((?!api|static|._\\.._|\_next).*),
};

Step 4: Define Dynamic Locale Routes

Implement dynamic routing for localized content:

Change src/app/page.ts to src/app/[locale]/page.ts

Step 5: Manage Your Content

Create and manage your content dictionaries:

// src/app/[locale]/page.content.ts
import { t, type ContentModule } from "intlayer";

const pageContent: ContentModule = {
  id: "page",
  getStarted: {
    main: t({
      en: "Get started by editing",
      fr: "Commencez par éditer",
      es: "Comience por editar",
    }),
    pageLink: "src/app/page.tsx",
  },
};

export default pageContent;

See how to declare your Intlayer declaration files.

Step 6: Utilize Intlayer in Your Code

Access your content dictionaries throughout your application:

// src/app/[locale]/page.ts

import { ClientComponentExample } from "@component/components/ClientComponentExample";
import { LocaleSwitcher } from "@component/components/LangSwitcherDropDown";
import { NestedServerComponentExample } from "@component/components/NestedServerComponentExample";
import { ServerComponentExample } from "@component/components/ServerComponentExample";
import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";

const Page: NextPageIntlayer = ({ params: { locale } }) => {
  const content = useIntlayer("page", locale);

  return (
    <>
      <p>
        {content.getStarted.main}
        <code>{content.getStarted.pageLink}</code>
      </p>
      {/**
       *   IntlayerServerProvider is used to provide the locale to the server children
       *   Don't work if set in the layout
       */}
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
      {/**
       *   IntlayerClientProvider is used to provide the locale to the client children
       *   Can be set in any parent component, including the layout
       */}
      <IntlayerClientProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerClientProvider>
    </>
  );
};

export default Page;

// src/components/ClientComponentExample.tsx

"use client";

import { useIntlayer } from "next-intlayer";

export const ClientComponentExample = () => {
  const content = useIntlayer("client-component-example"); // Create related content declaration

  return (
    <div>
      <h2>{content.title} </h2>
      <p>{content.content}</p>
    </div>
  );
};

// src/components/ServerComponentExample.tsx

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

export const ServerComponentExample = () => {
  const content = useIntlayer("server-component-example"); // Create related content declaration

  return (
    <div>
      <h2>{content.title} </h2>
      <p>{content.content}</p>
    </div>
  );
};

For more detailed usage of intlayer into Client, or Server component, see the nextJS example here.

Configuration of your project

Create a config file to configure the languages of your application:

// intlayer.config.ts

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      // Your other locales
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

To see all available parameters, refer to the configuration documentation here.

This version emphasizes ease of use, practical steps, and the professional application of Intlayer in a Next.js environment.