React Next.js基本配置（antd按需加载，next支持原本的css）

1、全局安装命令行工具

npm install -g create-next-app

2、使用命令建立项目

npx create-next-app project

3、查看是否成功创建next项目

cd project

yarn dev

4、让next支持css

yarn add @zeit/next-css

配置：根目录下新建next-config.js

复制代码进去：

const withCss = require('@zeit/next-css')

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

module.exports = withCss({
     })

Ant Design 按需加载配置

1、给项目加入antd

yarn add antd 

2、安装babel-plugin-import

yarn add babel-plugin-import

3、项目根目录下面新建一个.babelrc文件

代码如下

{
     
    "presets":["next/babel"],  //Next.js的总配置文件，相当于继承了它本身的所有配置
    "plugins":[     //增加新的插件，这个插件就是让antd可以按需引入，包括CSS
        [
            "import",
            {
     
                "libraryName":"antd"
            }
        ]
    ]
}

4、新建_app.js文件，全局引入css

代码如下

import App from 'next/app'

import 'antd/dist/antd.css'

export default App

这样Ant Design就可以按需引入了。即哪个页面需要就自己引入，并不会所有都引入。