How to set up Ant Design with Next.js

In this article we'll be covering how to make Ant Design with custom theming work flawlessly together with Next.js. Start by setting up your Next.js project.

yarn create next-app my-next-app

TypeScript

Now let's quickly also set up Typescript. This is done by simply renaming your index file from index.js to index.tsx, and adding a couple of dependencies.

mv pages/index.js pages/index.tsx

yarn add -D typescript @types/react @types/node

Ant Design

Now, let's install the necessary packages to get Ant Design with custom theming working.

yarn add antd next-plugin-antd-less@^0.3.0 babel-plugin-import

After installing these dependencies, we need to add some content to a next.config.js file. If it doesn't already exist, go ahead and create it, at the root of the project. Add the following content.

// next.config.js

const withAntdLess = require("next-plugin-antd-less");

module.exports = withAntdLess({
  lessVarsFilePath: "./styles/antd.less",
  webpack(config) {
    return config;
  },
});

Now, as you see in the code snippet above, we're pointing to a less file that should contain all the custom Ant Design variables. This file currently does not exist, so we need to add it. Go ahead and create a new antd.less file in the styles directory. Also, go ahead and add a couple of variables, so we have something to test with.

# styles/antd.less

@primary-color: #477593;
@border-radius-base: 5px;
@body-background: #f7f7f7;

The last thing we need to do is to set up a custom babel configuration. This is fairly easy and just requires you to add a couple of lines to a .babelrc.js file, which you can also create if it doesn't already exist.

// .babelrc.js

module.exports = {
  presets: [["next/babel"]],
  plugins: [["import", { libraryName: "antd", style: true }]],
};

Now you should be all good to go. Start the dev server by running

yarn dev

And then add a couple of components in the index file to make sure everything works.

import { Button } from "antd";

export default function Home() {
  return <Button type="primary">Custom button</Button>;
}

If the button now shows up in a green color instead of a blue one, the implementation is successful. If something did not work, try upgrading or downgrading to different versions of next-plugin-antd-less or babel-plugin-import. Thanks for reading!