Any plans for React Server Component APIs?

[adrianbw]

Next.js 13's /app directory (docs) uses React Server Components. Server components don't have access to Context, which means useIntl, FormattedMessage and anything else relying on Context won't work. Do you have any plans for APIs that work in server components in the future?

[oreqizer]

For now I am doing

import "server-only";

import { createIntl, createIntlCache } from "@formatjs/intl";

const intlMessages = {
  en: () => import("@/content/locales/en.json").then((m) => m.default),
};

export type Intls = keyof typeof intlMessages;

function getMessages(locale: string) {
  if (locale in intlMessages) {
    return intlMessages[locale as Intls]();
  }
  return intlMessages.en();
}

export async function getIntl() {
  const locale = "en"; // FIXME: take from headers or cookies or URL
  const cache = createIntlCache();
  const messages = await getMessages(locale);

  return createIntl({ locale, messages }, cache);
}

and then in components I call it

export default async function MyPage() {
  const intl = await getIntl();

  return (
    <Link href="/pages/formatting">
      {intl.formatMessage(
        { defaultMessage: "Fancy <b>formatting</b>" },
        {
          b: (text) => <strong>{text}</strong>,
        },
      )}
    </Link>
  );
}

this works perfectly 👍 you can then pass the intl instance from server components down your component tree via props

[adrianbw]

Yeah, we ginned up something similar to this, plus a brute force interpolator for rich text. To actually get the locale, we decided to do localized routing with rewrites, so the routes are all /[lang]/foo/bar/ but rewrite to /foo/bar in middleware. That lets us do static generation, since accessing cookies de-opts to dynamic rendering.

[bernhardw]

@oreqizer Shouldn't createIntlCache() be created outside of getIntl()? Otherwise it can't be reused by createIntl().

[oreqizer]

I prefer caching on a per-request basis to prevent unexpected behaviour due to the ephemeral nature of serverless functions. but yea I guess that'd work as well in the context of longer-lived instances

[sergioviniciuss]

It would be great if we could have defineMessages to run on serverside too..
so we could organize translations per component on a separate file like this:

"use client";
import { defineMessages } from "react-intl";
import { Messages } from "@/types/messages";

export const messages: Messages = defineMessages({
  LoginHeading: {
    id: "Login.heading.label",
    defaultMessage: "One account for all your products",
  },
  LoginButton: {
    id: "Login.button.label",
    defaultMessage: "Log in",
  },
});

and call it in the component like this:

import { messages } from "./messages";

export default async function MyPage() {
  const intl = await getIntl();

  return (
    <div>
      {intl.formatMessage(messages.LoginHeading)}
    </div>
  );
}

This way it would be great to isolate the messages per component and easier to ensure we're not repeating ids...

Honestly.. I think I'll have to move to next-intl :/

[oreqizer]

you can use defineMessages, just import it from @formatjs/intl instead of react-intl

[sergioviniciuss]

interesting @oreqizer ! could you tell me what's the difference?
but btw, I tried and got the same error I was getting before:
Error: Cannot access .LoginHeading on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

[sergioviniciuss]

nvm.. just removed the use client directive from my messages.tsx and works like a charm now! thanks for the hint (but I still wanted to understand this difference between react-intl and formatjs/intl

[oreqizer]

@sergioviniciuss react-intl calls React.createContext on the top level, throwing an error if you import it in RSCs. @formatjs/intl only exports non React context APIs, thus working with RSCs

[oreqizer]

worth noting that react-intl internally uses @formatjs/intl, thus these two packages are completely compatible in APIs and types. I am using em like this in production without issues for some months now