How to add Ant Design to a Next.js App

Introduction

Next.js is a popular react framework used for building production grade react applications that scale. It offers features such as hybrid, static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more without any config.

Ant Design is a popular react UI library that provides plenty of UI components to enrich your react applications.

In this article I will show you how to add the Ant Design UI component library to your Next.js project.

Prerequisite

Before we install next.js, you need to have Node.js 12.0 or later installed. If you already have your next.js app you can skip to the "Install Ant Design" section. If not, follow along to create a new next.js app.

Create a Next.js App

The easiest and recommended way to get started with a Next.js project is to run the following command in a terminal:

npx create-react-app next-antd

Feel free to name your app whatever you wish, for demonstration purposes I'll name my project next-antd as seen in the example above.

Install Ant Design

1. Navigate to your Next.js project root folder :

cd next_antd

1. Install Ant Design and it's Icon set using the following command:

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

1. Import the antd.css file at the very top of your pages/_app.js file:

import 'antd/dist/antd.css';

Start using Ant Design

Import any component from the Ant Design UI library. For example in the index.js you can import the Date Picker component:

// Importing the date picker component
import { DatePicker } from "antd";

export default function Home() {
	return (

		// Later in your file
		<DatePicker />
	);

}

Visit http://localhost:3000 in your browser to see the component rendered.

Conclusion

If you followed the steps right, you should now be able to use the Ant Design UI library in your Next.js project. I hope this articled helped you. You can also check out other cool articles and tutorials I've written or subscribe to my newsletter for updates.