How to use Ant Design in a Next.js project

Next.js is a React framework that is used to build fast, high-performance, hybrid static and server-side rendering web applications.

Ant Design is a UI library that provides a lot of pre-made React components like Button, DatePicker, DropDown, Drawer, etc, which can help you create beautiful and enterprise-class products.

In this article, you will learn how to use Ant Design in a Next.js project.

Basic Setup

1. Open your terminal window and navigate to the place you want your Next.js project to locate in then running:

npx create-next-app next_antd

The name is totally up to you.

2. Navigate to the project root folder:

cd next_antd

3. Install Ant Design core and its icon set with the following command:

npm install antd @ant-design/icons --save

4. Manually import the antd.css file at the very top of your pages/_app.js file:

import 'antd/dist/antd.css';

Now, we’re ready to use Ant Design components in our Next.js app.

Example

Replace the default code in your pages/index.js with this:

import { Button, Space, DatePicker, Card } from 'antd';
import { CiCircleFilled } from '@ant-design/icons';

export default function Home() {
  const onChange = () => {};
  return (
    <div style={{ padding: 100 }}>
      <Space direction="vertical">
        <Button type="primary">Primary Button</Button>
        <Button type="ghost">Ghost Button</Button>
        <DatePicker onChange={onChange} />
        <CiCircleFilled />
      </Space>
    </div>
  );
}

Get your app up and running by executing the following command:

npm run dev

Go to http://localhost:3000 on your web browser and check the result:

To see all available icons provided by Ant Design, just go to <your project>/node_modules/@ant-design/icons/lib/icons/index.d.ts.

An Error You May Run Into

If you use Ant Design version 4.10.1 or older, you may face this error:

Error: Must use import to load ES Module
required() of ES modules is not supported

Below’s the screenshot that depicts the error in detail. Don’t be panic. The solution is quite simple.

To fix that error, what you need to do is just upgrade Ant Design to version 4.10.2 or another newer version. Here’s my package.json when everything works fine:

{
  "name": "kindacode.com",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "antd": "^4.19.2",
    "next": "12.0.8",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7.32.0",
    "eslint-config-next": "12.0.8"
  }
}

Conclusion

Congratulations. You have successfully integrated Ant Design with Next.js. From here, keep on building your amazing project. If you would like to learn more about Next.js, take a look at the following articles:

• Next.js: Retrieve URL Params from Dynamic Routes
• Passing data via a Link component in Next.js
• How to Correctly Use Bootstrap 5 in Next.js
• How to use Font Awesome with Next.js
• Next.js: 404 error page and 404 error code

You can also check our React topic page and Next.js topic page for the latest tutorials and examples.