前言
Next.js 是 React 生态中一个非常流行的服务器渲染框架，而 Antd 是蚂蚁金服开发的一套企业级 UI 组件库，两者结合使用可以帮助我们快速开发高质量的应用。但是，Next.js + Antd 集成并不是一件轻松的事情，本文将详细介绍我们在集成时遇到的坑，并提供解决方案和示例代码，希望能够帮助大家更快地进行开发。
问题一：按需加载 Antd 样式失败
Antd 是一个基于 Less 开发的样式库，而 Next.js 默认是使用 CSS-in-JS 的方式来加载样式的，所以我们需要对其进行配置，实现按需加载。按照官方文档来说，我们只需要安装 less 和 less-loader 两个包，并在 next.config.js 文件中增加如下配置即可：
const withLess = require('@zeit/next-less')
module.exports = withLess()但是，实际上这种方式并不能生效，原因是因为我们需要在全局配置中禁用 Next.js 对 css 的处理，并且手动配置一个更为复杂的 less-loader。
首先，我们安装 less、less-loader 和 raw-loader：
npm install less less-loader raw-loader --save-dev
然后，我们在 next.config.js 文件中增加如下配置：
-- -------------------- ---- -------
----- -------- - --------------------------
----- ------- - -------------------------
-------------- - ---------
---------
----------- -----
-------- -------- - -------- -- -- -
-- -- ----
-- ----------- -
----------- - - --- ------- -
-
-------------------------
-
----- ----------
------- -------------------
-------- -
----- --------------------------
--
--
-
----- ---------
---- ---------------- --------------
--
-
----- ----------
---- -
-
------- -------------
-------- -
-------------- --
-------- -----
--------------- ----------------------------
--
--
-
------- --------------
-------- -
------------------ -----
--
--
--
--
-
------ ------
--
--
-这里解释一下上面的几个配置：
- cssModules：启用 css 模块化
- webpack：webpack 配置，这里添加了两个 loader，分别是 url-loader 和 file-loader，主要作用是打包 Antd 字体库和图片资源
- less：由于 Next.js 是服务端渲染，所以在原生 Node 端是无法解析 less 文件的，我们需要添加 node: { fs: 'empty' } 来解决此问题
- css：指定 css 的 loader 为 style-loader 和 css-loader
- less：Antd 样式库是基于 less 开发的，我们需要添加 less-loader，并指定 options 配置为 javascriptEnabled: true，以开启关键字配置
问题二：动态 import Antd 组件失败
Next.js 是一个非常好用的服务器渲染框架，但是在使用动态 import 的时候会有些问题。在使用 Antd 的时候，我们通常会这样写：
import { Button } from 'antd'但是，在使用动态 import 的时候，我们不能这样写，而应该写成这样：
import dynamic from 'next/dynamic'
const Button = dynamic(() => import('antd').then(mod => mod.Button))这是因为在服务器端渲染的时候，Next.js 会去加载所有的 import，所以使用动态 import 可以避免这个问题。
问题三：Antd 组件样式丢失
在服务端渲染的环境中，Antd 组件库的组件样式会丢失，这是因为服务器渲染过程中，没有浏览器环境，所以需要手动加载 Antd 样式库。
在我们的项目中，我们可以在 /pages/_document.js 文件中添加如下代码：
-- -------------------- ---- -------
------ --------- - ----- ----- ---------- - ---- ---------------
------ - ---------------- - ---- -------------------
------ --------------------
------ ------- ----- ---------- ------- -------- -
------ ----- -------------------- -
----- ----- - --- ------------------
----- ------------------ - --------------
--- -
-------------- - -- --
--------------------
----------- --- -- ----- -- ------------------------ ---------- ----
--
----- ------------ - ----- -----------------------------
------ -
----------------
------- -
--
---------------------
-------------------------
---
--
-
- ------- -
------------
-
-
-------- -
------ -
------
----- --
------
----- --
----------- --
-------
-------
-
-
-上面的代码中，我们通过创建一个 ServerStyleSheet 实例来解决 Antd 样式丢失的问题。同时，我们也需要在文件的头部引入 Antd 样式库。
总结
本文主要介绍了在使用 Next.js + Antd 进行开发的过程中，可能会遇到的一些问题，同时也提供了解决方案和示例代码。希望本文能够帮助到大家。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dfa764f6b2d6eab3adb3c8