next.js集成ant-design

next.js集成antd

next.js官方的教程挺好的，可以先学一遍

learn next

工程初始化

mkdir next-with-antd
cd next-with-antd
npm init -y
npm install --save react react-dom next
mkdir pages

添加antd

npm install --save antd babel-plugin-import @babel/plugin-proposal-decorators @zeit/next-css

在根目录下添加.babelrc配置文件

{
    "presets": ["next/babel"],
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]
}

在根目录下添加next.config.js配置文件

/* eslint-disable */
const withCss = require('@zeit/next-css');

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

module.exports = withCss();

修改package.json中scripts部分

"scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
}

启动运行

npm run dev