Next.js

Message Loading

This page explains how Message Loading is handled in a Next.js project.

Choosing a loading approach in Next.js:

When deploying to hosted platforms such as Vercel: Bundled
For more flexible scenarios: Local Loader , Remote Loader

Bundled

In the Next.js Quick Start, loading translation content by defining it directly in the config is already demonstrated.
This section introduces another bundled loading approach: Per-locale Loading (Dynamic Import) .

Per-locale Loading (Dynamic Import)

This section reuses the same translation content structure from the Next.js Quick Start .

To illustrate a different loading approach, the messages definition is temporarily removed from the config,
and routing.forceFullReload is enabled to ensure that the appropriate translation content is reloaded when switching locales.


intor-config.ts
M


import { defineIntorConfig } from "intor";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  // messages: { en: EN, fr: FR },
  routing: { forceFullReload: true },
});

Next, create load-messages.ts under the i18n/ directory.


load-messages.ts
U

For the complete implementation, see: Loaded per locale (Dynamic Import)

Then, load the translation content in layout.tsx and pass the result to IntorClientProvider.

layout.tsx
M


// ...
import { intor } from "intor/next/server";
import { intorConfig } from "@/i18n/intor-config";
import { IntorClientProvider } from "@/i18n/intor-client-provider";
import { loadMessages } from "@/i18n/load-messages";

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const value = await intor(intorConfig);
  const messages = await loadMessages(intorConfig, value.locale);

  return (
    <html lang={value.locale}>
      <body>
        <IntorClientProvider value={{ ...value, messages }}>
          {children}
        </IntorClientProvider>
      </body>
    </html>
  );
}

When using getTranslator() on the server side, the same dynamic loading strategy must also be specified.


export const generateMetadata = async (): Promise<Metadata> => {
  const { t } = await getTranslator(intorConfig, { loader: loadMessages });
  return { title: t("hello") };
};

Local Loader

For details on the Local Loader, see: Local Loader

This section reuses the same translation content structure from the Next.js Quick Start .

Enable the Local Loader via the loader config.


intor-config.ts
M


import { defineIntorConfig } from "intor";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  loader: { mode: "local" },
});

Remote Loader

For details on the Remote Loader, see: Remote Loader

This section reuses the same translation content structure from the Next.js Quick Start .

To simulate a remote service, copy the translation content into the public/ directory.


index.json
U
index.json
U

Enable the Remote Loader via the loader config.


intor-config.ts
M


import { defineIntorConfig } from "intor";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  loader: { mode: "remote", url: "http://localhost:3000/messages" },
});