To integrate ant-design with next.js

Question

I am trying to integrate ant-design with next.js. I have installed next in a default node project instead of using create-next-app.

I have followed zeit example of integrating next with antd.

My package.json file is

{
  "name": "crowd-funding",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next dev"
  },
  "author": "Thananjaya Chakravarthy S",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "antd": "^3.13.6",
    "next": "^4.1.4",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",

  },
  "devDependencies": {
    "babel-plugin-import": "^1.11.0"
  }
}

And my .babelrc file is

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

But I am getting an error like You may need an appropriate loader to handle this file type, pointing towards the path /node_modules/antd/dist/antd.css.

How to resolve this?

Answer 1

Create styles.css file

in styles.css:

@import "~antd/dist/antd.css";

in _app.js:

import "./styles.css";

now you can use ant design components anywhere in the project

Answer 2

You need to provide a way to load css files, usually it comes to use css-loader but next has a shortcut calls next-css.

Just add to your next.config.js file this:

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()

Checkout the official example: https://github.com/zeit/next.js/blob/canary/examples/with-next-css/next.config.js