How to implement i18n into a micro-frontend application using Module Federation

Question

What would you recommend for implementing i18n in a module federation micro-frontend next.js app?

At the moment (just starting) I got it working with react-intl by declaring the provider in the _app.tsx

  <IntlProvider locale={locale} defaultLocale={defaultLocale} messages={enMessages}>
    <SiteLayout>
      <Component {...pageProps}></Component>
    </SiteLayout>
  </IntlProvider>

And then when importing a component from another micro-frontend I am sending the intl object as param.

const XComponent = (await import('microApp2/XComponent')).default;
export default function ShellApp(): React.ReactElement {
  const intl = useIntl();
  return <XComponent intl={intl} />;
}

So that then in the micro-app component I can use it to format strings.

export default XComponent = (props: XComponentProps): React.ReactElement => {
  const { intl } = props;
  return (<div>{intl.formatMessage({ id: 'XComponent.Description' })}</div>);
}

The caveat of this approach is that I can only format using functions, I cannot make use of React DOM tags like:

<FormattedMessage id="" />

I didn't found much documentation so not sure this is a good approach. Those anybody knows or suggest any other solutions?

Thanks in advance!

Answer 1

You probably need to wrap each of your hosts with <IntlProvider> and get the value of your current language from a global source (like the URL or the state via a cookie etc).