（1）create-next-app就是Next.js的腳手架工具，
有了它能夠直接一句命令就創建好項目目錄和基本結構，省去了咱們不少的麻煩。css
若是你沒有使用過create-next-app,能夠先進行全局安裝，安裝以下：react
npm install -g create-next-app
（2）安裝好腳手架create-next-app後，建立咱們的項目：
create-next-app 文件名
（3）腳手架會給咱們建立好項目目錄和基本結構，npm run dev啓動項目。看到以下圖，啓動成功。
（4）使Next支持CSS文件
npm install --save @zeit/next-css
安裝好之後，在文件根目錄下，新建一個next.config.js文件npm
const withCss = require('@zeit/next-css') if(typeof require !== 'undefined'){ require.extensions['.css']=file=>{} } module.exports = withCss({})
（5）按需加載Ant Design
npm install --save babel-plugin-import
安裝好以後，在文件根目錄下，新建一個.babelrc的文件，配置代碼以下：babel
{ "presets":["next/babel"], //Next.js的總配置文件，至關於繼承了它自己的全部配置 "plugins":[ //增長新的插件，這個插件就是讓antd能夠按需引入，包括CSS [ "import", { "libraryName":"antd" } ] ] }
在文件的pages目錄下，新建一個_app.js文件，而後把CSS進行全局引入.：antd
import App from 'next/app' import 'antd/dist/antd.css' export default App
這樣就能夠在其餘文件裏，按需引入Ant Design 的組件了，例如：app
// index.js import React from 'react' import Head from 'next/head' import {Button} from 'antd' // 按需引入了button按鈕 const Home = () => ( <div> <Head> <title>Home</title> <link rel="icon" href="/favicon.ico" /> </Head> <Button>按鈕</Button> </div> ) export default Home