Next With Ant Design Less

Next With Ant Design Less is a boilerplate template that combines Next.js, Ant Design of React, and Less styling out of the box. Developers fork and clone the repository, install dependencies, and launch a Next.js app with Ant Design preconfigured and a custom Less theming file ready to edit.

What is Next With Ant Design Less?

Next With Ant Design Less is a Next.js application template with Ant Design of React preinstalled and preconfigured, plus Less support for custom theming. It takes a standard Next.js project skeleton and equips it with the Ant Design component library and a Less build pipeline. The project runs on Next.js, a React-based framework, and the live demo is hosted at next-with-ant-design-less.now.sh. The repository has 6 stars and accepts pull requests.

Key Features

• Preconfigured Ant Design — Ant Design of React is installed and set up so all components work immediately in a Next.js app.
• Less support — Less preprocessing is enabled, with a custom theme file located at /assets/antd-custom.less.
• Custom theme override — The custom Less file lets you override Ant Design's default variables (colors, fonts, spacing) for theming; the repository links to Ant Design's official Less theme documentation.
• Simple setup — Fork the repo, clone your fork, run yarn install, then run next to start the development server.
• Standard Next.js app — The template remains a standard Next.js application, so built-in features like server-side rendering and routing work as usual.
• Demo instance — A hosted example is available on now.sh to see the configuration in action.

Who is it for?

• Next.js developers who want to use Ant Design without manually configuring the build process.
• React developers looking for a ready-to-run boilerplate that includes Ant Design and Less theming.
• Project teams starting a new admin panel, dashboard, or internal tool that will rely on Ant Design components and a customized theme.

What can you do with it?

• Quick prototyping: Scaffold a new app and immediately use Ant Design buttons, forms, tables, and other components with zero configuration.
• Custom theming: Edit the Less file to change the primary color, border radius, or other design tokens, then reload to see changes.
• Learning: Study how Ant Design and Less are integrated with Next.js to apply the same pattern to other projects.

How does it work?

Fork the repository, clone your fork, run yarn install to install dependencies, then run next to start the development server. The custom Less file is already wired into the app, so any variable changes take effect on the next build.