跳到主内容

如何在 Next.js 中使用 Ant Design 4.x?

· 3分钟阅读

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/

nextjs-start-success

安装 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>;
}

可以看到下面的结果

antd-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 }]],
};

重新运行代码,可以看到主题已经编程黑色了

antd-custom-button-theme