Next.js中使用antd组件

Posted 2023-05-04

参考技术A Next.js中不能直接使用css，需要我们自行解决：

（1）需要安装 @zeit/next-css ： npm install --save @zeit/next-css

（2）安装成功，需要在根目录建立 next.config.js

(3)重启项目

（1）先安装Ant Design 库： npm install --save antd

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

目的：只加载项目中用到的模块，这就需要我们用到一个 babel-plugin-import 文件，配置好了 .babelrc 就不会把Ant Design打包到生产环境。

（3）重启项目

（4）在需要的页面引入

将 next.js 添加到组件库中以使用 Next.js 功能

【中文标题】将 next.js 添加到组件库中以使用 Next.js 功能

【英文标题】：Adding next.js into a component library to make use of Next.js features

【发布时间】：2021-01-17 13:49:18

【问题描述】：

我正在制作一个将在 Next.js 项目中使用的 React 组件库。我想将 Next.js 的功能添加到我的组件中。

只需在组件库中添加 Next.js 作为开发依赖项就足够了吗？

【参考方案1】：

如果您打算将组件作为包发布，则需要将 next.js 添加到 peerDependencies。这样做表明您的项目依赖于 next.js 中的内容，但它不包含在您的包中，应该安装在实际项目本身上。

详情请看这里：https://classic.yarnpkg.com/en/docs/dependency-types/#toc-peerdependencies