这是因为Ant Design组件使用的样式在构建时没有被正确加载。为了解决这个问题，您可以尝试以下步骤：

1. 首先，确保在您的Next.js项目中安装了必要的依赖项：

npm install --save antd
npm install --save-dev less less-loader

2. 在您的项目中，创建一个next.config.js文件，并将其放置在您的根目录中。在该文件中，添加以下代码：

// next.config.js

const withLess = require('@zeit/next-less')
const withCSS = require('@zeit/next-css')

module.exports = withLess(withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  },
  lessLoaderOptions: {
    javascriptEnabled: true
  }
}))

• 对于这些配置，我们使用了 @zeit/next-css 和 @zeit/next-less 来处理 CSS 和 Less 文件，并使用了 url-loader 和 file-loader 来处理字体文件和图像文件。

• lessLoaderOptions允许我们的 Less 文件在处理时支持 JavaScript。

3. 在您的项目中，创建一个布局文件layout.js（如果没有的话），并确保在将Ant Design组件添加到您的页面之前导入必要的CSS和样式文件：

// layout.js

import 'antd/dist/antd.css'

4. 最后，在您的页面中，确保导入必要的组件，并使用它们：

import { Button } from 'antd'

function MyPage() {
  return (
    

      Click me
    
  )
}

export default MyPage

重新启动服务，您应该能够看到Ant Design组件正常工作了。