解决Next.js引入Antd组件库样式闪烁的问题

按照官网给的 例子，仍然有很多报错， 而且最新的next文件结构发生了变化，查询很多资料终于解决

package.json

安装@ant-design/cssinjs 和 antd

yarn add @ant-design/cssinjs
yarn add antd

创建RootStyleRegistry文件

'use client'
import { useState, type PropsWithChildren } from 'react'
import { useServerInsertedHTML } from 'next/navigation'
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'

export const RootStyleRegistry = ({ children }: PropsWithChildren) => {
  const [cache] = useState(() => createCache())

  useServerInsertedHTML(() => {
    return (
      <script
         dangerouslySetInnerHTML={{
          __html: `</script>${extractStyle(cache)}<script>`,
        }}
      />
    )
   })

   return <StyleProvider cache={cache}>{children}</StyleProvider>
}

app/layout中引入RootStyleRegistry