Using Ant Design with NextJS (custom variables for Ant Design)
Tags: react, nextjs, antdesign, 100daysofcode
Published: 2020-06-18 16:49:50

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](https://twitter.com/burhanuday). Subscribe to my [newsletter](https://www.burhanuday.com/)