Next.js 9.x 集成 antd 框架方法

一、安装 next-sass 和 next-less

yarn add @zeit/next-sass @zeit/next-less

二、在配置文件 next.config.js 中添加内容

const withSass = require('@zeit/next-sass')
const withLess = require('@zeit/next-less')

const isProd = process.env.NODE_ENV === 'production'

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => { }
}

module.exports = withLess(withSass({
  lessLoaderOptions: {
    javascriptEnabled: true
  }
}))

三、创建文件 less/global.less ，并引入 antd.less 文件

@import "~antd/dist/antd.less";

@primary-color: #C02400;

四、创建 pages/_app.js 文件并添加以下内容

import React from 'react'
import App from 'next/app'

import '../less/global.less'

class MyApp extends App {
  render() {
    const { Component, pageProps} = this.props

    return (
        <Component {...pageProps} />
    )
  }
}

export default MyApp

参考链接：Customize Ant Design Theme in Next JS (Version 9 +)