Next.js中使用antd組件

Next.js中不能直接使用css，須要咱們自行解決：

1、先解決不能引入css，只能使用<style jsx>的問題

（1）須要安裝 @zeit/next-css ： npm install  --save @zeit/next-css

（2）安裝成功，須要在根目錄創建next.config.js

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

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

module.exports = withCss({})

(3)重啓項目

2、引入antd

（1）先安裝Ant Design 庫： npm install --save antd

（2）再安裝babel-plugin-import： npm install --save babel-plugin-import

       還須要根目錄新建 .babelrc 文件進行配置

　　目的：只加載項目中用到的模塊，這就須要咱們用到一個babel-plugin-import文件，配置好了 .babelrc 就不會把Ant Design打包到生產環境。

{
    "presets":["next/babel"], // Next.js的配置文件，至關於繼承了它自己的全部配置
    "plugins":[  // 增長新的插件，這個插件就是讓antd能夠按需引入，包括css
        [
            "import",
            {
                "libraryName":"antd",
                "style":"css"  // 引入css
            }
        ]
    ]
}

（3）重啓項目

（4）在須要的頁面引入

import '../static/common.css'
import {Button} from 'antd'

function Header(){
    return (
        <>
            <Button>我是按鈕，你是嗎</Button>
        </>
        
    )
}
export default Header