TheLazy.Dev
Portfolio GitHub

Blog

react |nextjs |antdesign |100daysofcode

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

burhanuday

Burhanuddin Udaipurwala

Posted on June 18, 2020

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
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

Connect with me

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

💖 💪 🙅 🚩
burhanuday
Burhanuddin Udaipurwala

Posted on June 18, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

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

June 18, 2020