How to render a react component with translation on server?

[Tockra]

Hello,

I'm using compile from @onedoc/react-print in my javascript backend to render a react component.
In past I used i18n on next 12 but after rebuilding my application into next 13 app directory structure, I changed to next-intl.

But now there is a problem. How can I pass the translation function into my react component?
In the past I did it this way:

       const htmlString = await compile(
          <Tailwind>
            <MyComponent
              _nextI18Next={translationsProps.i18n}
              data={data}
              page={i}
            />
          </Tailwind>,
        );

Does anybody has an idea?

If I use

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

    const htmlString = await compile(
      <Tailwind>
        <NextIntlClientProvider messages={messages}>
          <div id="footer-is-loaded">
            <Test />
          </div>
        </NextIntlClientProvider>
      </Tailwind>,
    );

And

import { useTranslations } from "next-intl";

export function Test() {
  const t = useTranslations();

  return <div>{t("tooltip.sidebar.systempreferences")}</div>;
}

I receive:

Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale. The `notFound()` function will be called as a result.


Unable to find `next-intl` locale because the middleware didn't run on this request. See https://next-intl-docs.vercel.app/docs/routing/middleware#unable-to-find-locale. The `notFound()` function will be called as a result.

Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.
    at renderToStringImpl (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.node.development.js:11837:11)
    at Module.renderToString (webpack-internal:///(rsc)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom-server-legacy.no
    
....

Thank you for your help ;)

T

[amannn]

Hmm, I haven't worked with @onedoc/react-print so far. Where do you execute the function? In a Route Handler or Server Action?

Based on the error message, it seems like you're rendering with Server Components. You could try adding a 'use client'; directive to your Test component, that way the messages should be picked up from NextIntlClientProvider.

[Tockra]

Where do you execute the function? In a Route Handler or Server Action?

In a Route Handler.

[Tockra]

Maybe somebody could give some insights. How does the middleware enrich the whole setup, so it can use useTranslation under the hood. I think I have to do this step manually if I'm in my server route handler.
Maybe even this won't work...

[amannn]

Thanks for the reproduction, that helps quite a bit!

I dug a bit into this and there seems to be a rather unfortunate combination of limitations affecting your use case!

Here's the breakdown:

1. Client components don't work in Route Handlers (Impossible to Server-Render Client Components in API Routes vercel/next.js#68150)
2. compile doesn't support suspense or async components (probably requires a future React API, see [Fax] Publish experimental_renderToHTML facebook/react#30690)

Due to this, I found that it's easiest to move to an API Route (Pages Router): amannn/tockra-nextjs-test-playground@9c21c8e

Hope this helps!

[Tockra]

Thank you for your effort.
I'll try to build the pages routes into my application the next days.
Do you know some downsides having a app directory and a pages directory (for routes) ?

[amannn]

Sure, glad to hear if that works for you!

I'm not aware of any downsides of this approach, no. Also, if you follow the two links I've mentioned above, there should be an alternative that's compatible with the App Router in the foreseeable future I think—in case you prefer that.

[Tockra]

Hey @amannn, thank you again for providing that solution!

Previously, I was more focused on getting a working fix, so I implemented your solution directly into our application. However, I’d like to better understand the root cause of the problem now.

Specifically, I’m unclear about the origin of the issue and why the Pages Router resolves it, while the App Router does not. Currently, I’m experimenting with React 19 and Next.js 15 to dig deeper into this.

Ultimately, my goal is to transition away from the Pages Router structure, as I’m concerned that Next.js may phase it out in a future major release. Any additional insights or guidance you could share would be greatly appreciated!

[amannn]

You might want to follow along here: OnedocLabs/react-print-pdf#13 (comment)