Next.js中使用antd組件

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

一、先解決不能引入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)重啟項目

二、引入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