(1)create-next-app
就是Next.js
的腳手架工具,
有了它可以直接一句命令就建立好項目目錄和基本結構,省去了我們很多的麻煩。
如果你沒有使用過create-next-app
,可以先進行全局安裝,安裝如下:
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
文件
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的文件,配置代碼如下:
{ "presets":["next/babel"], //Next.js的總配置文件,相當於繼承了它本身的所有配置 "plugins":[ //增加新的插件,這個插件就是讓antd可以按需引入,包括CSS [ "import", { "libraryName":"antd" } ] ] }
在文件的pages目錄下,新建一個_app.js
文件,然后把CSS進行全局引入.:
import App from 'next/app' import 'antd/dist/antd.css' export default App
這樣就可以在其他文件里,按需引入Ant Design 的組件了,例如:
// 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