- Published on
Using Ant Design with NextJS (custom variables for Ant Design)
- Authors
- Name
- Burhanuddin Udaipurwala
- @burhanuday
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 nodeif (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