next-plugin-antd-less 로 Antd @primary-color 변경하기

/pages/antd-custom.less

@import "~antd/lib/style/themes/default.less";
@import "~antd/dist/antd.less"; // Import Ant Design styles
@primary-color: #f5222d;
@font-family: "OpenSans-Regular";

/package.json

{
  "name": "front",
  "version": "1.1.0",
  "description": "ymilonga-front",
  "main": "index.js",
  "scripts": {
    "dev": "next -p 3050",
    "build": "cross-env ANALYZE=true NODE_ENV=true next build",
    "prestart": "npm run build",
    "start": "cross-env NODE_ENV=production next start -p 3050"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/maldives0/ymillonga.git"
  },
  "author": "maldives0",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/maldives0/ymillonga/issues"
  },
  "homepage": "https://github.com/maldives0/ymillonga#readme",
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@emotion/babel-plugin": "^11.2.0",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@next/bundle-analyzer": "^10.0.9",
    "antd": "^4.18.6",
    "axios": "^0.21.1",
    "cross-env": "^7.0.3",
    "immer": "^9.0.6",
    "moment": "^2.29.1",
    "next": "^12.0.10",
    "next-compose-plugins": "^2.2.1",
    "next-plugin-antd-less": "^1.8.0",
    "next-redux-saga": "^4.1.2",
    "next-redux-wrapper": "^6.0.2",
    "null-loader": "^4.0.1",
    "passport": "^0.4.1",
    "passport-google-oauth20": "^2.0.0",
    "pm2": "^5.1.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-redux": "^7.2.3",
    "react-slick": "^0.27.14",
    "react-social-login-buttons": "^3.4.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "sass": "^1.32.8",
    "swr": "^0.3.11"
  },
  "devDependencies": {
    "@babel/core": "^7.17.2",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.3",
    "css-loader": "^6.6.0",
    "eslint": "^7.23.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "^6.2.0",
    "less-loader": "^10.2.0",
    "url-loader": "^4.1.1"
  }
}

/next.config.js

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

const withPlugins = require("next-compose-plugins");
const withAntdLess = require("next-plugin-antd-less");

const withAntdLessConfig = {
  modifyVars: { "@primary-color": "#f5222d" },
  lessVarsFilePath: "./pages/antd-custom.less",
  lessVarsFilePathAppendToEndOfContent: false,
};
const plugins = [[withBundleAnalyzer], [withAntdLess, withAntdLessConfig]];
const nextConfig = {
  webpack: (config, { webpack }) => {
    const prod = process.env.NODE_ENV === "production";
    const newConfig = {
      ...config,
      mode: prod ? "production" : "development",
      module: {
        rules: [
          ...config.module.rules,
          {
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
            use: {
              loader: "url-loader",
              options: {
                limit: 100000,
                name: "[name].[ext]",
              },
            },
          },
        ],
      },
      plugins: [
        ...config.plugins,
        new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\/ko$/),
      ],
    };

    if (prod) {
      newConfig.devtool = "hidden-source-map";
    }

    return newConfig;
  },
};

module.exports = withPlugins(plugins, nextConfig);

참고
https://velog.io/@ooooorobo/Next.js%EC%97%90%EC%84%9C-Ant-Design-primary-color-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0