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

 

来源：https://www.cnblogs.com/linjiu0505/p/11956717.html