Using Ant Design with NextJS (custom variables for Ant Design)

Day1: Started a new project to learn NextJS. Faced my first hurdle today when trying to setup a NextJS project with Ant Design. Using Ant Design with NextJS was fairly straight forward but when i tried to use custom variables for Ant Design, that's where things got tricky.

You can create a new NextJS project with

yarn create next-app app-name

OR

npx create-next-app app-name

In the NextJS project, install Ant Design with

yarn add antd

OR

npm install --save antd

create a new file called antd.less in the styles folder in the root of the project. Create a styles folder if you aren't already using one. antd.less is the file where all your custom variables will go

antd.less

@import "~antd/dist/antd.less";

@primary-color: #000; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

You can customise these variables as you wish. Take a look at the Ant Design customisation docs for more.

In the pages directory create a new file called _app.js with the following contents

_app.js

import React from "react";
import App from "next/app";

import "../styles/antd.less";

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return <Component {...pageProps} />;
  }
}

export default MyApp;

You can also import any other global styles here

Right now, your custom variables will have no effect. For that to work you will need to install these packages -

yarn add @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less

OR

npm install --save @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less

Now you will need to create a custom NextJS config for your variables to work

next.config.js

const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");

const isProd = process.env.NODE_ENV === "production";

// fix: prevents error when .less files are required by node
if (typeof require !== "undefined") {
  require.extensions[".less"] = (file) => {};
}

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  ...withLess(
    withSass({
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
    })
  ),
});

With this config you will be able to use less, sass and css modules in your project. Your custom variables for Ant Design will now work

Connect with me

You can follow me on DEV or connect with me on Twitter. Subscribe to my newsletter

Comments

[Reza Abdi]

Thanks for guide!
I have an issue and it's that after the last part (Next.config.js)
I can not run my app and when I run npm run dev it encounters this error
Cannot find module 'webpack'
Also I have tried installing webpack package an it did nothing
Hope find some Help

[Arch.h]

After I run:
npm i webpack@webpack-4

the error disappeared.

[uncleilia]

been facing the same issue for a while and haven't found any answers, hope someone helps because I'm loosing my mind over this

[Siddiqui Affan]

Hey, I followed everything written in the post. But still can't make it run.

Error that I got:

ready - started server on 0.0.0.0:3000, url: localhost:3000
info - Using webpack 5. Reason: Enabled by default nextjs.org/docs/messages/webpack5
TypeError: Cannot set property 'styles' of undefined
at module.exports (C:\Users\name\Projects\nextjs\node_modules\@zeit\next-css\css-loader-config.js:25:56)
at Object.webpack (C:\Users\name\Projects\nextjs\node_modules\@zeit\next-css\index.js:15:36)
at Object.getBaseWebpackConfig as default
at async Promise.all (index 0)
at async HotReloader.start (C:\Users\name\Projects\nextjs\node_modules\next\dist\server\dev\hot-reloader.js:278:25)
at async DevServer.prepare (C:\Users\name\Projects\nextjs\node_modules\next\dist\server\dev\next-dev-server.js:252:9)
at async C:\Users\name\Projects\nextjs\node_modules\next\dist\cli\next-dev.js:121:9

Depndencies installed:
"@zeit/next-css": "^1.0.1",
"@zeit/next-less": "^0.0.4",
"@zeit/next-sass": "^0.0.4",
"antd": "^4.16.13",
"babel-plugin-import": "^1.13.3",
"bootstrap": "^5.1.0",
"less": "^4.1.1",
"mongodb": "^4.1.1",
"next": "11.1.0",
"react": "17.0.2",
"react-dom": "17.0.2",

[Nick Beukema]

Thanks for the guide! Just as an FYI for anyone following this as well, and running into issues with importing the ~antd/dist/antd.less file within antd.less, make sure you install the less package targeted at version ^3.12.2.

It looks like version ^4.0.0 is installed by default and triggers the following error:

error - ./styles/antd.less

.@{ant-prefix}-anchor {
  .reset-component;
                ^
Unrecognized input. Possibly missing '(' in mixin call.

[dmamira]

May I translate this article into Japanese and post it on my blog?
Actually, in Japan, there are few articles about Ant Design.

[Burhanuddin Udaipurwala]

Sure. Go ahead!

[dmamira]

Thank you!
blog.dai.gd/posts/sxsssie5k

[isaack okello brian]

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See webpack.js.org/concepts#loaders

@import "~antd/dist/antd.less";

[Burhanuddin Udaipurwala]

Hey, make sure you copied next.config.js file correctly. Less files require a special loader to be used. Also recheck that you performed all steps

[Teejay85]

I am having this problem too but I copied and pasted your next.config.js file. Is there a specific folder this file should go under?

[Joel Grenon]

Nice detailed solution. thanks. Did you have the chance to use it with next@10? Seems that there's an issue with webpack and mini-css-extract-plugin when using latest version of next. I just reverted back to version 9 and it's working like a charm :)

[isaack okello brian]

Yarn start not working, sorry Newbie here. Also can you show me how to install and use storybook in this project?

[Burhanuddin Udaipurwala]

Have you installed yarn on your computer? You can also npm if you haven't.

[isaack okello brian]

It worked thank you so much. Btw is it an idea that you can create a boilerplate on git hub for antd and storybook? Think more like an enterprise boilerplate for UX designers who still learning the ropes to code. BTW thanks a mil for this

[Cillian Barron]

This is great! Have you figured out switching themes from the client side yet?

[Fabio Motta]

I resolved using it:
npmjs.com/package/next-plugin-antd...

[Hasan TEZCAN]

Helpful!