ConfigProvider组件在nextjs13.4 app目录项目中能像antd-design一样，提供类似AntdRegistry.tsx来支持ssr配置多语言嘛

[loakliu]

Version of antd-mobile

5.33

Operating system and its version

Others

Browser and its version

No response

Sandbox to reproduce

No response

What happened?

我在next.js 中像antd-design一样配置ConfigProvider组件，但却提示必须要添加‘use client’
能否像antd-design一样，支持让ConfigProvider组件可以不需要添加‘use client’
https://ant-design.antgroup.com/docs/react/use-with-next-cn

下面是报错信息：

Relevant log output

No response

[zombieJ]

感觉可以加一个

[loakliu]

感觉可以加一个

现有方案上，有啥好思路可以不升级解决嘛～
我目前能想到的就是，把configProvider降低dom树的层级，hook一层，在使用的页面/组件，添加‘use client’，再provider，有其他的思路可以提供下嘛

[loakliu]

这个是我的解决方案，在next项目中，创建configProvider.tsx，然后将组件挂载到layout.tsx中，参考的是next官网给的例子：https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers
这个我先关闭了。
`
'use client';
//type
import { Locale } from 'antd-mobile/es/locales/base';

//ts
import { ConfigProvider } from 'antd-mobile';
import { createContext } from 'react';
import en from 'antd-mobile/es/locales/en-US';
import cn from 'antd-mobile/es/locales/zh-CN';

interface AntdLngConfigProps {
[key: string]: Locale;
}
interface MobileConfigProviderType {
children: React.ReactNode;
lng: string;
}
const AntdMobileLngConfig: AntdLngConfigProps = {
en,
cn,
};

export const mobileConfigContext = createContext();
export default function MobileConfigProvider({ children, lng }: MobileConfigProviderType) {
return (
<mobileConfigContext.Provider value={lng}>
{children}
</mobileConfigContext.Provider>
);
}
`

[bingqichen]

这个是我的解决方案，在next项目中，创建configProvider.tsx，然后将组件挂载到layout.tsx中，参考的是next官网给的例子：https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers 这个我先关闭了。 ` 'use client'; //type import { Locale } from 'antd-mobile/es/locales/base';

//ts import { ConfigProvider } from 'antd-mobile'; import { createContext } from 'react'; import en from 'antd-mobile/es/locales/en-US'; import cn from 'antd-mobile/es/locales/zh-CN';

interface AntdLngConfigProps { [key: string]: Locale; } interface MobileConfigProviderType { children: React.ReactNode; lng: string; } const AntdMobileLngConfig: AntdLngConfigProps = { en, cn, };

export const mobileConfigContext = createContext(); export default function MobileConfigProvider({ children, lng }: MobileConfigProviderType) { return ( <mobileConfigContext.Provider value={lng}> {children} </mobileConfigContext.Provider> ); } `

你好，问一下你这个是完整的吗，我反复试了一下没有效果，想请教一下有没有最小实现的代码参考一下

[loakliu]

这个是我的解决方案，在next项目中，创建configProvider.tsx，然后将组件挂载到layout.tsx中，参考的是next官网给的例子：https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers 这个我先关闭了。 'use client'; //type import { Locale } from 'antd-mobile/es/locales/base'; //ts import { ConfigProvider } from 'antd-mobile'; import { createContext } from 'react'; import en from 'antd-mobile/es/locales/en-US'; import cn from 'antd-mobile/es/locales/zh-CN'; interface AntdLngConfigProps { [key: string]: Locale; } interface MobileConfigProviderType { children: React.ReactNode; lng: string; } const AntdMobileLngConfig: AntdLngConfigProps = { en, cn, }; export const mobileConfigContext = createContext(); export default function MobileConfigProvider({ children, lng }: MobileConfigProviderType) { return ( <mobileConfigContext.Provider value={lng}> {children} </mobileConfigContext.Provider> ); }

你好，问一下你这个是完整的吗，我反复试了一下没有效果，想请教一下有没有最小实现的代码参考一下

是完整的，都已经运用在生产环境了，我的代码是公司内部，不方便粘贴一个demo出来，整个就是一个configProvider.tsx，具体是跟antd的一模一样的，使用你可以参考这里https://ant.design/docs/react/use-with-next-cn 里面有一个App router对应的

[loakliu]

这个是我的解决方案，在next项目中，创建configProvider.tsx，然后将组件挂载到layout.tsx中，参考的是next官网给的例子：https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers 这个我先关闭了。 'use client'; //type import { Locale } from 'antd-mobile/es/locales/base'; //ts import { ConfigProvider } from 'antd-mobile'; import { createContext } from 'react'; import en from 'antd-mobile/es/locales/en-US'; import cn from 'antd-mobile/es/locales/zh-CN'; interface AntdLngConfigProps { [key: string]: Locale; } interface MobileConfigProviderType { children: React.ReactNode; lng: string; } const AntdMobileLngConfig: AntdLngConfigProps = { en, cn, }; export const mobileConfigContext = createContext(); export default function MobileConfigProvider({ children, lng }: MobileConfigProviderType) { return ( <mobileConfigContext.Provider value={lng}> {children} </mobileConfigContext.Provider> ); }

你好，问一下你这个是完整的吗，我反复试了一下没有效果，想请教一下有没有最小实现的代码参考一下

这个是我的解决方案，在next项目中，创建configProvider.tsx，然后将组件挂载到layout.tsx中，参考的是next官网给的例子：https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers 这个我先关闭了。 'use client'; //type import { Locale } from 'antd-mobile/es/locales/base'; //ts import { ConfigProvider } from 'antd-mobile'; import { createContext } from 'react'; import en from 'antd-mobile/es/locales/en-US'; import cn from 'antd-mobile/es/locales/zh-CN'; interface AntdLngConfigProps { [key: string]: Locale; } interface MobileConfigProviderType { children: React.ReactNode; lng: string; } const AntdMobileLngConfig: AntdLngConfigProps = { en, cn, }; export const mobileConfigContext = createContext(); export default function MobileConfigProvider({ children, lng }: MobileConfigProviderType) { return ( <mobileConfigContext.Provider value={lng}> {children} </mobileConfigContext.Provider> ); }

你好，问一下你这个是完整的吗，我反复试了一下没有效果，想请教一下有没有最小实现的代码参考一下

方便的话，你可以把你的demo贴出来下，我可以抽空帮你看看

[bingqichen]

@loakliu 可以了，感谢兄弟相助！！