Next.js 作为 React 服务端渲染流行的前端框架之一，本文会一步一步介绍如何集成 Ant Design 到 Next.js 中，并且能实现在 Next.js 中自定义 Ant Design 主题。
初始化 Next.js 项目
万地高楼平地起，我们先来创建一个基础的 Next.js 项目，通过命令快速创建一个 Next.js 项目
npx create-next-app nextjs-antd --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
然后进入项目目录，运行以下命令，访问地址可以得到下面的界面即代表成功 http://localhost:3000/
安装 Ant Design
通过下面的命令安装 Ant Design，并且在项目中使用
npm i antd --save
在 pages 目录新建一个 _app.js 文件，并且在文件中引入 import 'antd/dist/antd.css'; 完整代码如下
import "antd/dist/antd.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
引入样式完成后，就可以在项目中使用了，我们来修改 /pages/index.js 文件
import { Button } from "antd";
export default function Home() {
return <Button type="primary">1024nav</Button>;
}
可以看到下面的结果
定制化 Ant Design 主题
上面已经完成了 Next.js 集成 Ant Design，但是我们如果我们想定制化 Ant Design 主题，还需要做以下工作
安装 next-plugin-antd-less 插件
在项目的根目录下，运行以下命令安装插件，顺便安装 babel-plugin-import 插件
npm install next-plugin-antd-less babel-plugin-import -D
新建 next.config.js 文件，如果已经有该文件，则直接进行修改，修改后的代码如下
const withAntdLess = require("next-plugin-antd-less");
module.exports = withAntdLess({
// 修改antd的主题变量
modifyVars: { "@primary-color": "#333" }, // 修改antd的primary颜色为黑色
// optional https://github.com/webpack-contrib/css-loader#object
cssLoaderOptions: {},
webpack(config) {
return config;
},
});
修改 babel 配置
在项目新建一个 .babelrc.js 文件，如果已经有该文件，则直接进行修改，修改后的代码如下
module.exports = {
presets: [["next/babel"]],
plugins: [["import", { libraryName: "antd", style: true }]],
};
重新运行代码，可以看到主题已经编程黑色了
