DEV Community

loading...

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

burhanuday profile image Burhanuddin Udaipurwala ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

OR

npx create-next-app app-name
Enter fullscreen mode Exit fullscreen mode

In the NextJS project, install Ant Design with

yarn add antd
Enter fullscreen mode Exit fullscreen mode

OR

npm install --save antd
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

OR

npm install --save @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less
Enter fullscreen mode Exit fullscreen mode

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,
      },
    })
  ),
});
Enter fullscreen mode Exit fullscreen mode

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

Discussion (20)

Collapse
rezaabdi78 profile image
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

Collapse
archcra profile image
Arch.h

After I run:
npm i webpack@webpack-4

the error disappeared.

Collapse
uncleilia profile image
uncleilia

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

Collapse
nickbeukema profile image
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.
Enter fullscreen mode Exit fullscreen mode
Collapse
dmamira profile image
dmamira

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

Collapse
burhanuday profile image
Collapse
dmamira profile image
Collapse
kulgeek profile image
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";

Collapse
burhanuday profile image
Burhanuddin Udaipurwala Author

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

Collapse
tommyjackson85 profile image
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?

Collapse
kulgeek profile image
isaack okello brian

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

Collapse
burhanuday profile image
Burhanuddin Udaipurwala Author

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

Collapse
kulgeek profile image
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

Collapse
jgrenon profile image
Joel Grenon

Nice details 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 :)

Collapse
hasantezcan profile image
Hasan TEZCAN

Helpful!

Collapse
shakesbeardz profile image
Yahia Battach

Hi, thanks for the good article, do you know where to put the ConfigProvider
this one: ant.design/components/config-provider
it's for i18n

Collapse
oliverdeva profile image
oliverdevA

Hi Burhanuddin

While working with Antd, it says:
snipboard.io/VcfQSN.jpg

Could we fix this without removing Strict mode?

Collapse
fabiomotta0311 profile image
Collapse
rocinante89 profile image
Cillian Barron

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

Collapse
kulgeek profile image
isaack okello brian

I also get this error

Forem Open with the Forem app