跳到主内容

如何在 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

如果您有什么看法或意见，欢迎通过右边的反馈悬浮框反馈
本文为原创，未经同意授权，禁止任何媒体或个人自媒体以及任何声明式转载
商业侵权必究，如需授权请联系340443366@qq.com
原文链接：https://www.1024nav.com/blog/nextjs-use-antdesign
京东家电