How to make Lingui RSC translations work for "special" nextjs loading file?

[robinclaes]

I have the following file which is a special next loading.js file. I can't seem to get translations to work

• When I use the HoC (withLinguiPage) it says props.params is empty - since NextJS does not pass searchParams / params to the special loading file.
• When I do not use the HoC, I get the following error: You tried to use Trans in Server Component, but i18n instance for RSC hasn't been setup. Make sure to call setI18n in the root of your page.

Any feedback is welcome.

// /app/[lang]/redirect/loading.tsx

import Card, { Color } from '@/components/Card';
import { Spinner } from '@/components/Spinner';
import { Trans } from '@lingui/react/macro';
import { withLinguiPage } from '@/lib/withLingui';

async function Loading() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-background">
      <Card
        color={Color.PRIMARY}
        className="flex flex-col items-center gap-2 bg-white"
      >
        <Trans>Please wait while we redirect you...</Trans>
        <Spinner />
      </Card>
    </div>
  );
}

// Does not work due to missing i18n initialization
export default Loading;

// Does not work due to missing params in props
// export default withLinguiPage(Loading);

[vonovak]

Hello and thanks for asking!
The nextjs team will give you a better answer; from quickly reading the docs, afaict this is not possible precisely because nextjs doesn't provide locale info (to the loading.js file).

However AFAIK loading.js file is just a sugar for using Suspense. So if you use Suspense directly you might be able to work around this.

Hope this helps,
Thank you!

[timofei-iatsenko]

You need to call seti18n before using a RSC Trans component. withLinguiPage usually doing this for you, but if it doesn't work you can do that manually.

import { setI18n } from '@lingui/react/server'

setI18n( /*pass a lingui instance there */)

You need to know what locale this request is using, this might be trickiest part depending on how to language switching is working for your app. You can consult with nextjs docs to get info how to read route params in the loading file.

[robinclaes]

I have currently worked around this by making loading.tsx a use client component.