Project technology: nextjs13 (using App Router method) + antd (v5.9.2)
Step 1 : Follow the instructions on the antd official website (5 steps), only configure the first 4 steps, and omit the 5th step : use - Ant Design in Next.js
Step 2 : Modify the lib/AntdRegistry.tsx file and add the ConfigProvider component and related Chinese imports to the file.
"use client";
import React from "react";
import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
import type Entity from "@ant-design/cssinjs/es/Cache";
import { useServerInsertedHTML } from "next/navigation";
import { ConfigProvider } from "antd";
import zhCN from "antd/locale/zh_CN"; // 设置antd组件用中文
import theme from "../theme/themeConfig"; // antd相关主题等自定义配置
import "dayjs/locale/zh-cn"; // datePicker等日期组件显示中文
const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
const cache = React.useMemo<Entity>(() => createCache(), []);
useServerInsertedHTML(() => (
<style
id="antd"
dangerouslySetInnerHTML={
{ __html: extractStyle(cache, true) }}
/>
));
return (
<StyleProvider cache={cache}>
<ConfigProvider theme={theme} locale={zhCN}>
{children}
</ConfigProvider>
</StyleProvider>
);
};
export default StyledComponentsRegistry;