• • 编辑：**此答案对于当前版本的next.js来说肯定已经过时，请检查下面的其他答案。

经过几个小时的研究，我终于找到了正确的解决方案，并希望分享它：
.babelrc（此处无魔法）

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

next.config.js：

/* eslint-disable */
const withLess = require('@zeit/next-less');
const withSass = require('@zeit/next-sass');
const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './assets/antd-custom.less'), 'utf8')
);

module.exports = withSass({
  cssModules: true,
  ...withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables, // make your antd custom effective
      importLoaders: 0
    },
    cssLoaderOptions: {
      importLoaders: 3,
      localIdentName: '[local]___[hash:base64:5]'
    },
    webpack: (config, { isServer }) => {
      //Make Ant styles work with less
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === 'function') {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === 'function' ? [] : origExternals)
        ];

        config.module.rules.unshift({
          test: antStyles,
          use: 'null-loader'
        });
      }
      return config;
    }
  })
});

如何编写withSasswithLess使用以及将cssModules: true放入外部对象的最后一个提示来自这里的注解。
虽然我已经尝试了从前面的例子中得出的不同组合：next+ant+lessnext+sass
为了完成这里的依赖关系在我的package.json：

...
"dependencies": {
    "@zeit/next-less": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "antd": "^4.1.3",
    "babel-plugin-import": "^1.13.0",
    "less": "^3.11.1",
    "less-vars-to-js": "^1.3.0",
    "next": "^9.3.4",
    "node-sass": "^4.13.1",
    "null-loader": "^3.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sass": "^1.26.3"
  }
...

我希望这能帮助其他人更快地找到这个解决方案

@zeit/next-less已过时，并禁用Next的内置CSS支持。它还使用了非常旧的less和less-loader版本。
我创建了一个包，通过复制SASS规则并将其设置为Less文件和less-loader，向Next.js注入Less支持。
https://github.com/elado/next-with-less
https://www.npmjs.com/package/next-with-less

虽然上面的答案可能适用于低于11的NextJS版本，但它们不适用于11+。我发现以下插件非常成功...
https://github.com/SolidZORO/next-plugin-antd-less

我使用的是elado的包-https://github.com/elado/next-with-less
你将需要less和less-loader作为dependency. after that创建一个global.less文件在styles文件夹. so it 's like，root〉style > global.less and paste this code

@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less'; 
@primary-color: #ff9b18; 
@border-radius-base: 20px;

并将下面的代码添加到您的next.config.js文件中，该文件将在根文件夹中创建。

// next.config.js
const withLess = require("next-with-less");

module.exports = withLess({
    lessLoaderOptions: {
        /* ... */
    },
});

在我们的项目中，有旧的scss和css文件。它们没有使用CSS模块的Next js指导方针。所以我不得不覆盖webpack.config.js。所以这工作得很好。但是当我们把文件移到monorepo共享包中时，babel没有把它们翻译出来。我使用了下面的东西，但是这些东西对没有. module扩展名的SCSS模块不起作用。

• 下一可传递模块。
• 实验性：{ externalDir: true, }在下一个Js配置中，根目录为babel.cofig.json

最后符号链接黑客工作的外部共享文件

• • 通过更新next. config. js为共享文件夹使用符号链接**

module.exports = {
  //...
  resolve: {
    symlinks: false,
  },
};

对于那些仍然有问题的人来说，除了我们可爱的mini-css-extract-plugin之外，你不需要任何额外的软件包。
PS：我还在我的Webpack配置中添加了Sass。你可以在你的项目中使用less和Sass/SCSS文件。
next.config.js：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpack(config) {
    config.module.rules.push(
      {
        // this part is for sass
        test: /\.module\.(scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader' },
          { loader: 'sass-loader' },
        ],
      },
      {
        // this part is for less
        test: /\.less$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true,
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      }
    );

    config.plugins.push(
      new MiniCssExtractPlugin({
        filename: 'static/css/[name].css',
        chunkFilename: 'static/css/[contenthash].css',
      })
    );

    return config;
  },
};

package.json：

"dependencies": {
    "@next/font": "13.1.1",
    "css-loader": "^6.7.3",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "mini-css-extract-plugin": "^2.7.2",
    "next": "13.1.1",
    "next-transpile-modules": "^10.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass": "^1.57.1",
    "sass-loader": "^13.2.0",
  }