How to use antdesign with Next.js

Cover Image for How to use antdesign with Next.js
Marouane Reda
Marouane Reda
If you need to understand the basics of Next.js, i recommend this course. (Disclaimer : this is an affiliate link that may earn me a small commission, but with no extra cost to you if you choose to enroll)

Like chakra-ui, ant design is a componenet library that you can use to speed up the developpement of your next.js app, giving it a nice professional feel.

Why use ant design

ant-design is a componenent library used mainly for react apps, but can also work with next.js apps.

Rich library

Nearly every component you will need is probably provided by ant design, from simple buttons to date pickers or calendar components.

Highly customizable components

You can costumize you components via multiple props, or for more in depth customization, change the .less file

built-in functionnalities

Very handy functionnalities are built into ant design components, for example the table components has filtering and ordering build into the component itself, which is very handy.

RTL and internationnalization support

how to 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.

  1. Navigate to the project root folder:
cd next_antd
  1. Install Ant Design core and its icon set with the following command:
npm install antd @ant-design/icons --save
  1. 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. For example, we will modify our pages/index.js to add a normal button, a ghost button and a date picker :

import { Button, Space, DatePicker, Card } from 'antd';

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} />

this is the result :

ant first

You can also customize the default theme to suit your design needs.