How to use Ant Design with Next.js

Ant Design is an enterprise UI design library for React applications. It consists of many components and was developed to help speed up dev cycles. Ant Design is an open source package for React; it is officially supported and remains one of the most popular UI kits today.

Next.js is a popular React framework, known for its performance, developer experience, and prebuilt configuration. No manual configuration is necessary for this.

By combining Next.js with Ant Design, we can build scalable, efficient, and developer-friendly apps with ease. In this article, we will be taking a look at how developers can integrate Ant Design with Next.js — let’s get started!

Here’s what we will be doing today:

• Creating a NextJS app
• Install Ant Design
• Adding Ant Design components
  • Layouts
  • Forms
  • Tables
  • ConfigProvider
  • Icons
• Issues and optimization

Creating a Next.js app

First, let’s create a Next.js app using the following command:

npx create-next-app@latest

There is also a TypeScript version, but here I’m using the JavaScript version.

After installation, enter the below commands and go to localhost:3000 in your browser to see the app.

cd app-name
yarn run dev

You can see the homepage in the browser:

Next, let’s install Ant Design to make our app more interactive.

Install Ant Design

We can install Ant Design to our Next.js app with a single command:

yarn add antd

After installation, we can start configuring Ant Design. Import antd/dist/antd.css in the _app.js file. By doing this, we import the Ant Design component styles globally and are not required to import each component individually. Ant Design also supports the Less version of CSS.

Adding Ant Design components

Now, let’s start adding in the components that make up the Ant Design system.

Layouts

Remove the existing code from index.js and add the below code to include the top bar and sidebar with menus.

import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React, { useState } from 'react';
const { Header, Sider, Content } = Layout;

export default function Home() {
  const [collapsed, setCollapsed] = useState(false);
  return (
      <Layout className="layout">
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="logo" />
          <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={['1']}
              items={[
                {
                  key: '1',
                  icon: <UserOutlined />,
                  label: 'nav 1',
                },
                {
                  key: '2',
                  icon: <VideoCameraOutlined />,
                  label: 'nav 2',
                },
                {
                  key: '3',
                  icon: <UploadOutlined />,
                  label: 'nav 3',
                },
              ]}
          />
        </Sider>
        <Layout className="site-layout">
          <Header
              className="site-layout-background"
              style={{
                padding: 0,
              }}
          >
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: () => setCollapsed(!collapsed),
            })}
          </Header>
          <Content
              className="site-layout-background"
              style={{
                margin: '24px 16px',
                padding: 24,
              }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
  )
}

In the above code, we have included the Ant layout component with the sidebar. Add the below CSS in the globals.css file to make some UI improvements.

.trigger {
  padding: 0 24px;
  font-size: 18px;
  line-height: 64px;
  cursor: pointer;
  transition: color 0.3s;
}

 .trigger:hover {
  color: #1890ff;
}

 .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}

.layout {
  height: 100vh;
}

Once you add the above CSS, navigate to your browser to see the output. As you can see, we completed the layout with menus in just a few minutes, which is pretty good!

Next, we can add form components to get user data. You are not required to install a third-party form package for this, as Ant itself already includes form components with some powerful features.

Forms

Ant design forms come with predefined validation rules, default value options, and various inputs. Create a CustomForm component in the components folder and add the following code:

import React from 'react';
import { Button, Form, Input, InputNumber } from 'antd';
const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
    required: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};
/* eslint-enable no-template-curly-in-string */

const CustomForm = () => {
    const onFinish = (values) => {
        console.log(values);
    };

    return (
        <Form className="form" {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
            <Form.Item
                name={['user', 'name']}
                label="Name"
                rules={[
                    {
                        required: true,
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name={['user', 'email']}
                label="Email"
                rules={[
                    {
                        type: 'email',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name={['user', 'age']}
                label="Age"
                rules={[
                    {
                        type: 'number',
                        min: 0,
                        max: 99,
                    },
                ]}
            >
                <InputNumber />
            </Form.Item>
            <Form.Item name={['user', 'website']} label="Website">
                <Input />
            </Form.Item>
            <Form.Item name={['user', 'introduction']} label="Introduction">
                <Input.TextArea />
            </Form.Item>
            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                <Button type="primary" htmlType="submit">
                    Submit
                </Button>
            </Form.Item>
        </Form>
    );
};

export default CustomForm;

Include the CustomForm component in index.js as below to make it visible on the homepage.

         <Content
              className="site-layout-background"
              style={{
                margin: '24px 16px',
                padding: 24,
              }}
          >
            <CustomForm/>
          </Content>

Validation

Ant forms include the rules props to add validation for each input with less work. In the above form, we have validated the email input using the email type rule.

                rules={[
                    {
                        type: 'email',
                    },
                ]}

Commonly used validation rules

• Enum: Match enum value
• Len: Number or string length
• Max: Maximum length of string and number
• Min: Minimum length of string and number
• Pattern: RegEx pattern
• Whitespace: Validates if the input has whitespace
• Type: Validates string, number, email, Boolean, and URL

API integration

We can use the onFinish function to submit the form data to the backend using APIs after validating.

 const onFinish = (values) => {
       fetch('https://example.com/profile', {
    method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(values),
})
  .then((response) => response.json())
  .then((data) => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
};

Prefill data to form fields

We can use setFieldsValue to set values in the form:

form.setFieldsValue({ name: 'Jack' });

form.setFieldsValue({ email: '[email protected]' });

Navigate to the browser to see our form in action:

In the above UI, we have used the primary button component; Ant Design also includes other types of buttons, like these below:

Tables

Next, let’s include a table in our app to list some data.

Add the below code and add it to the components/CustomTable.js component.

import { Space, Table, Tag } from 'antd';
import React from 'react';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => {text},
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green';

          if (tag === 'loser') {
            color = 'volcano';
          }

          return (
            
              {tag.toUpperCase()}
            
          );
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      
        Invite {record.name}
        Delete
      
    ),
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];

const CustomTable = ()
; export default CustomTable;

The table component has two major props: columns and dataSource. The columns prop is used to pass the table columns, and dataSource is used to pass the data for the table.

Next, import the table component in the index.js file. Now, the table is included on our homepage as below:

Commonly used table props

• Pagination: To add pagination for the table
• Loading: To show loading on API calls
• Columns: Columns of the table
• dataSource: Data for the table
• Size: Table size

Commonly used columns props

• defaultSorter: Default order of the sorted values
• render: Render the table cells
• sorter: Sorter function for table columns
• align: Column alignment

Ant Design’s table component includes frontend and backend pagination, sorting, filters, checkboxes for selecting rows, nested sets, infinite scroll tables, and more.

ConfigProvider

ConfigProvider is the context API for Ant Design components to configure the properties globally. You can add ConfigProvider by inserting the following:

import { ConfigProvider } from 'antd';

export default () => (
  
    
  
);

Configure locale

You can simply set the locale all components using the config provider below.

import { ConfigProvider } from 'antd';

export default () => (
  <ConfigProvider direction="rtl" locale="en">
    <App />
  </ConfigProvider>
);

Component size config

import { ConfigProvider } from 'antd';

export default () => (
  <ConfigProvider direction="rtl" locale="en" componentSize="medium">
    <App />
  </ConfigProvider>
);

We can use configProvide for subtree components, not only global components.

Icons

To use Ant Design icons, we need to install the icons package from Ant using this command:

yarn add @ant-design/icons

Ant has three different icon types:

• Outlined
• Filled
• Two-tone

Import the components as below:

import {
    HomeOutlined, 
    LoadingOutlined,
    SettingFilled,
    SyncOutlined

} from '@ant-design/icons';

const  iconSize = { fontSize: '40px', color: '#08c' };

const ShowIcons = () => (
<HomeOutlined  style={iconSize} />
<SettingFilled  style={iconSize} />
<SyncOutlined spin  style={iconSize} />
<LoadingOutlined  style={iconSize} />
);

Icons output

Ant Design has components for List, Alerts, Notification, Pickers, Icons and more — you can explore all the components by following this link.

Issues and optimization

The major issue we would face is the CSS bundle size, as we imported the entire CSS file in _app.js as below in _app.js, which would import the CSS for all the Ant Design components, irrespective of their usage.

import ‘antd/dist/antd.css

When we build the app, we might see the CSS size. The total CSS size for our example app is 67.3KB. Check the image below for more information.

This seems very large, and it will decrease the app performance and increase the app loading time. To fix this, we can reduce it by importing the CSS only for the used components.

Component-level CSS import

Using the next-plugin-antd-less and babel-plugin-import packages and adding some config, we can achieve this.

Use the following commands to install the packages:

yarn add next-plugin-antd-less
yarn add --dev babel-plugin-import

After installation, create .babelrc file in the root folder and add the below code.

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

Next, add the below config code in the next.config.js file.

const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  // modifyVars: { '@primary-color': '#04f' }, // optional
  lessVarsFilePath: './src/styles/variables.less', // optional
  lessVarsFilePathAppendToEndOfContent: false, // optional
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions: {
    // ...
    mode: "local",
    localIdentName: "[hash:base64:8]",but you can rewritten getLocalIdentFn
    exportLocalsConvention: "camelCase",
    exportOnlyLocals: false,
    // ...
    getLocalIdent: (context, localIdentName, localName, options) => {
      return "whatever_random_class_name";
    },
  },

  // Other Config Here...

  webpack(config) {
    return config;
  },
});

Remove the imported antd.css file from _app.js.

import 'antd/dist/antd.css

Now build the example app:

yarn build

Once the build is completed, we can see the CSS bundle size has been reduced from 67.3KB to 38.7KB. We have reduced the size by around 40% by doing this!

Conclusion

Ant Design helps to build a rich user interface with minimal work and less time than traditional means. It can be used for all types of apps and its community is large and engaged in case you need to get help. In this article, we have covered the essential components; visit the Ant Design docs to explore all the components and see how you can use Ant Design to improve your project development.