[英]How to implement i18n into a micro-frontend application using Module Federation
What would you recommend for implementing i18n in a module federation micro-frontend next.js app?对于在模块联合微前端 next.js 应用程序中实施 i18n,您有什么建议?
At the moment (just starting) I got it working with react-intl
by declaring the provider in the _app.tsx
目前(刚刚开始)我通过在
_app.tsx
中声明提供程序来使用react-intl
<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.然后从另一个微前端导入组件时,我将
intl
object 作为参数发送。
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:这种方法的警告是我只能使用函数进行格式化,我不能使用 React DOM 标签,例如:
<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!提前致谢!
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).您可能需要用
<IntlProvider>
包装您的每个主机,并从全球来源(如 URL 或 state 通过 cookie 等)获取当前语言的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.