Next.js & Ant Design (& Less) Made Easy

A @zeit/next-less patch with full support for Ant Design, Less and CSS modules

Version compatibility

• for antd: <4.0.0, use next-plugin-antd: ~0.1.3
• for antd: >=4.0.0, use next-plugin-antd: ^0.2.0

create-next-app example

npm init next-app -e https://github.com/ye-will/next-plugin-antd/tree/master/examples/with-ant-design-less with-ant-design-less

or

yarn create next-app -e https://github.com/ye-will/next-plugin-antd/tree/master/examples/with-ant-design-less with-ant-design-less

Installation

npm install --save next-plugin-antd less antd

Configuring

Create/Edit next.config.js in your project

// next.config.js
const withPluginAntd = require("next-plugin-antd")
module.exports = withPluginAntd({
  /* config options here */
})

Add a .babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "import", {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

Congratulations 🎉🎉🎉

Options

antdThemeVariables: less-vars-to-js config to customize ant design theme

All @zeit/next-less options are supported, such as cssModules, cssLoaderOptions, lessLoaderOptions, postcssLoaderOptions