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 .babelrc
file
code show as below
{
"presets":["next/babel"], //Next.js的总配置文件,相当于继承了它本身的所有配置
"plugins":[ //增加新的插件,这个插件就是让antd可以按需引入,包括CSS
[
"import",
{
"libraryName":"antd"
}
]
]
}
4, the new _app.js
file, 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.