Next-Antd Boilerplate

Next-Antd Boilerplate is a Next.js boilerplate that bundles Ant Design with Less support for mobile-first web development.

What is Next-Antd Boilerplate?

Next-Antd Boilerplate is a starter project built on Next.js and TypeScript that ships with Ant Design and Less support already configured. It takes a blank Next.js app and adds a themed Ant Design component library, a mobile-only layout, and developer tooling. The repository is maintained by hridoy43 and is available on GitHub.

Key Features

• Ant Design with Less support — Zero-config Less integration, letting you use Ant Design components with Less syntax out of the box.
• Theme customization — Edit styles/antd-variables.less to override Ant Design's default Less variables and apply your own design tokens.
• Mobile-only layout — The layout is optimized for mobile viewports; enable it by setting max-width: 480px in components/layout/appLayout.module.scss.
• Global style control — Change the app background color from styles/globals.less.
• Quick start — Run npm run dev or yarn dev to start the development server and open http://localhost:3000.
• Code quality tooling — Includes ESLint, Stylelint, PostCSS, and Commitizen for conventional commits.

Who is it for?

• Frontend developers who want a Next.js project with Ant Design pre-integrated and Less support without manual webpack configuration.
• Mobile web app teams that need a mobile-first layout and a dark background default, ready to customize.
• UI developers who want to theme Ant Design components through Less variables and see changes instantly during development.

What can you do with Next-Antd Boilerplate?

• Build a mobile-first web app: Use the built-in Ant Design components and mobile-only layout to quickly create a mobile UI.
• Customize the look: Edit styles/antd-variables.less to change the theme and styles/globals.less to change the background color.
• Prototype a product: Spin up a local dev server in seconds and start coding with ESLint and Stylelint catching issues.

How does Next-Antd Boilerplate work?

Clone or fork the repository, install dependencies, then run npm run dev or yarn dev to start the development server at http://localhost:3000. The boilerplate wires Ant Design's Less theming through styles/antd-variables.less and applies a mobile-only layout through components/layout/appLayout.module.scss.

FAQ

Is Next-Antd Boilerplate free?

Yes, it is a public GitHub repository without any subscription or payment requirement.

What does Next-Antd Boilerplate include?

It includes a Next.js app with Ant Design, Less support, a mobile-only layout configuration, ESLint, Stylelint, PostCSS, TypeScript, and Commitizen integration.

How do I customize the theme?

Edit styles/antd-variables.less in the repository to override Ant Design's default Less variables; changes apply on reload.