Usage in non-next.js environment

[dbondarchuk]

Is your feature request related to a problem? Please describe.

My application consists of NextJs web apps and a few Node.js workers and I need to translate some values in a worker (for example, sending email with few values translated). These values already exist in i18n files, and my incoming values are i18n keys, that i need to get translation for

Describe the solution you'd like

Add a new override for getTranslations to accept config

Describe alternatives you've considered

Manually loading translation files - not great DX

[dbondarchuk]

For example, my base config factory that is shared between 2 different NextJs apps looks like this (so I don't fetch admin translations for public website):

import { getRequestConfig } from "next-intl/server";
import { mergeObjects } from "./utils";

export const getConfig = (
  getLocale: (baseLocale: string | undefined) => Promise<{
    locale: string;
    includeAdmin: boolean;
    includeInstall?: boolean;
  }>,
  getMessages?: () => Promise<{
    public: (locale: string) => Promise<Record<string, Record<string, any>>>;
    admin: (locale: string) => Promise<Record<string, Record<string, any>>>;
    overrides: (locale: string) => Promise<(Record<string, any> | undefined)[]>;
  }>,
) =>
  getRequestConfig(async ({ locale: baseLocale }) => {
    const { locale, includeAdmin, includeInstall } =
      await getLocale(baseLocale);

    const externalMessages = await getMessages?.();
    const publicMessages = await externalMessages?.public(locale);
    let messages: Record<string, any> = {
      translation: (await import(`./locales/${locale}/translation.json`))
        .default,
      ui: (await import(`./locales/${locale}/ui.json`)).default,
      validation: (await import(`./locales/${locale}/validation.json`)).default,
      ...(publicMessages || {}),
    };

    if (includeAdmin) {
      messages.admin = (await import(`./locales/${locale}/admin.json`)).default;
      messages.builder = (
        await import(`./locales/${locale}/builder.json`)
      ).default;
      messages.apps = (await import(`./locales/${locale}/apps.json`)).default;

      const adminMessages = await externalMessages?.admin(locale);
      messages = {
        ...messages,
        ...(adminMessages || {}),
      };
    }

    if (includeInstall) {
      messages.install = (
        await import(`./locales/${locale}/install.json`)
      ).default;
    }

    const overrideEntries = await externalMessages?.overrides(locale);
    const overrides =
      overrideEntries?.filter(Boolean).reduce(
        (acc, entry) => {
          return mergeObjects(acc as {}, entry ?? {});
        },
        {} as Record<string, any>,
      ) ?? {};

    messages = mergeObjects(messages, overrides);

    return {
      locale,
      onError: (error) => console.error(error),
      getMessageFallback: ({ namespace, key }) => `${namespace}.${key}`,

      messages,
    };
  });

[tomtien]

Hi

what you are looking for is use-intl.

It's the core library next-intl uses, you can leverage it to add translations to any react/node app.

https://next-intl.dev/docs/environments/core-library

What you probably need is the createTranslator function

This is a snippet from one of my node apps.

import {
	createTranslator,
	type Locale,
	type Messages,
	type NamespaceKeys,
	type NestedKeyOf,
} from "use-intl/core";
import type { _Translator as Translator } from "use-intl/core"; 

import en from "@/messages/en.json";

const messages = {
	"en-US": en,
};

export function getTranslator<T extends Namespace>(
	locale: Locale,
	namespace?: T,
): Translator<Messages, T> {
	const t = createTranslator({
		locale: locale,
		messages: messages[locale as keyof typeof messages],
		namespace: namespace,
	});

	return t;
}

Then you can just use getTranslator like this:

const t = getTranslator(locale, "Translations.something")

Hope this provides a solution to your problem!

[dbondarchuk]

Thanks @tomtien ! while this is a great solution, i have some shared code that relies on calling getTranslations server function.
I tried folliwng:

1. in node app in my esbuild config add following:

 alias: {
    "next-intl/config": "./src/i18n/config.ts",
  },

2. And change next-intl package.json for "./server" deafult to export "./dist/esm/development/server.react-server.js" instead of "./dist/esm/development/server.react-client.js"

It actually worked great on node app. but package.json change broke NextJs app build...
would love to find the workaround for this!

Thank you!

[amannn]

Yep, the low-level createTranslator API is something you can consider—see e.g. https://github.com/resend/react-email-next-intl-example/blob/main/emails/welcome.tsx.

I'll move this to a discussion since it's a usage question.