How to customize Ant Design theme in a Next.js application without Babel (SWC)

Next.JS introduced its own compiler, (after v12.0.0) written in Rust using SWC, which allows Next.js to transform and minify your JavaScript code for production. This replaces Babel for individual files.

Next.JS doesn’t support lessbut Antd uses less variables by default. (MR is already created but we don’t know when it will be added. That’s why we need to use a third-party package) That’s why to customize Antd theme the old method was to use Babel. After the introduction of SWC, when we use Babel this new compiler is disabled by default. If you want to compare, the SWC compiler is 10x times faster than Babel.

I assume that you already have a Next.js application and Antd is installed.

1. Import antd variables in _app.tsx

import 'antd/dist/antd.less'

2. Install next-with-less package to add less support to Next.js application.

yarn add next-with-less less less-loader
or 
npm i next-with-less less less-loader

3. Use next-with-less to add less support to Next.js application. You can find the list of antd variables here

const withLess = require('next-with-less');
/** @type {import('next').NextConfig} */
module.exports = withLess({
  lessLoaderOptions: {
    lessOptions: {
      modifyVars: {
         // Add variables here
        'font-family': 'Quicksand, sans-serif',
        'border-radius-base': '50px',
      },
    },
  },
  compiler: {
    styledComponents: true,
  },
});