1. 在项目根目录中创建一个next.config.js文件并加入以下配置：

const withLess = require('@zeit/next-less');
const withCSS = require('@zeit/next-css');
const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');

const GITHUB_URL = 'https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less';

if (typeof require !== 'undefined') {
  require.extensions['.less'] = (file) => {};
}

module.exports = withCSS(
  withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: lessToJS(fs.readFileSync(path.resolve(__dirname, './styles/antd.less'), 'utf8')),
    },
    webpack: (config, { isServer }) => {
      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;
    },
    env: {
      GITHUB_URL,
    },
  }),
);

2. 在pages文件夹下的每个页面都应该导入AppLayout并加入以下代码：

import AppLayout from '../src/components/app-layout';

const IndexPage = () => (
  <>
    
      
Hello World!
    
  
);

export default IndexPage;

3. 如果您使用了Next.js v9.x.x或更高版本，则应该在next.config.js文件中加入以下配置：

module.exports = {
  future: {
    webpack5: true,
  },
};