React Next.js basic configuration (antd demand loading, next support for the original css)

1, the global install command-line tool

npm install -g create-next-app

2, use the command to establish the project

npx create-next-app project

3, to see if successfully created next project

cd project

yarn dev

4, let the next support css

yarn add @zeit/next-css

Configuration: Create the root directorynext-config.js

Copy the code into it:

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

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

module.exports = withCss({})

Ant Design load configuration on demand

1, adding to the projectantd

yarn add antd 

2, installationbabel-plugin-import

yarn add babel-plugin-import

3, the project root directory to create a new .babelrcfile

code show as below

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

4, the new _app.jsfile, the global introduction of css

code show as below

import App from 'next/app'

import 'antd/dist/antd.css'

export default App

Such Ant Design will be introduced on demand. That which pages need to introduce on their own, and not all are introduced.