Next.js 项目中如何引入 Ant Design-JavaScript中文网-JavaScript教程资源分享门户

Ant Design 是一个 React UI 库，通过自带的 UI 组件和配套的样式、图标等资源，可以极大地提高我们的前端开发效率。但是，在使用 Ant Design 时，有些同学却遇到了一些问题。本文将重点介绍在 Next.js 项目中如何引入 Ant Design。

前置知识

在阅读本文之前，你需要具备以下知识：

React.js 的基础知识；
Next.js 的基础知识；
Ant Design 的使用经验。

步骤

1. 安装 Ant Design

首先，我们需要在项目中安装 Ant Design，可以通过以下命令进行安装：

npm install antd
# or
yarn add antd

2. 配置 babel

Ant Design 使用了一些高阶组件和装饰器语法（@decorator），我们需要对项目的 babel 配置进行修改，以支持这些语法。在 Next.js 项目中，我们可以在根目录下创建一个 .babelrc 文件，添加以下配置：

{
  "presets": ["next/babel"],
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }]]
}

3. 引入样式文件

Ant Design 中所有组件的样式都是通过 less 文件进行定义的。Next.js 默认支持 CSS Modules，因此我们需要在项目中引入 less 文件，并配置对 .less 后缀和 antd 目录的文件进行编译。

在项目中安装 less-loader 和 @zeit/next-less，可以通过以下命令进行安装：

npm install less less-loader @zeit/next-less
# or
yarn add less less-loader @zeit/next-less

编辑 next.config.js 文件，添加以下配置：

-- -------------------- ---- -------
----- -------- - ---------------------------

-------------- - ----------
  ------------------ -
    ------------------ -----
  --
  --------------- -------- -
    --------------------------
      ----- ----------
      ---- -
        -----------------------------
        -
          ------- -------------------------------
          -------- -
            ----------- ---
          --
        --
      --
    ---
    ------ -------
  --
---

4. 引入组件

通过以上步骤，我们已经可以在项目中使用 Ant Design 的组件了。在需要使用的地方，直接引入即可，比如：

import { Button } from 'antd';

function IndexPage() {
  return <Button type="primary">按钮</Button>;
}

export default IndexPage;

如果需要使用某个模块的样式，可以通过以下方式引入：

import 'antd/dist/antd.css';

5. 按需加载

由于 Ant Design 中的组件非常多，如果直接引入整个库，会影响项目的性能。因此，我们可以通过按需加载的方式，只引入用到的组件。

在项目中安装 babel-plugin-import，可以通过以下命令进行安装：

npm install babel-plugin-import
# or
yarn add babel-plugin-import

编辑 .babelrc 文件，添加以下配置：

-- -------------------- ---- -------
-
  ---------- ---------------
  ---------- -
    ---------- -
      -------------- -------
      -------- -----
    ---
    ------------------------------------- - --------- ---- ---
    ------------------------------------------- - -------- ---- --
  -
-

在需要使用的地方，可以按以下方式引入组件：

import { Button } from 'antd';

到这里，我们已经成功地将 Ant Design 引入到 Next.js 项目中了。

总结

安装 Ant Design；
配置 babel，支持 @decorator 语法；
引入样式文件，需要安装 less 和 @zeit/next-less；
引入组件，并按需加载。

如果你遇到了任何问题，可以参考官方文档或者向社区寻求帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/644f8ddd980a9b385b8fc22c