nextJs13: 中国語を表示するために antd の日付コンポーネント、日付ピッカーなどをグローバルに設定する方法 (2 ステップ)

プロジェクトテクノロジー: nextjs13 (App Router 方式を使用) + antd (v5.9.2)

ステップ 1 : antd 公式 Web サイトの指示 (5 つのステップ) に従い、最初の 4 つのステップのみを構成し、5 番目のステップは省略します: Next.js の Ant Design を使用します。 

ステップ 2 : lib/AntdRegistry.tsxファイルを変更し、ConfigProviderコンポーネントと関連する中国語インポートをファイルに追加します。

"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;