How to configure antd version 5 with Next.js and React.js

Configuring the newest version of antd (till today 5.0.5) with Next.js and react.js is much easier then the previous versions. Now we do not need to create and import other files such as .babelrc.js and less files in this new version.

Let’s get started

First we need to create a react or next app in my case I am going to create next app

npx create-next-app
yarn create next-app

Then simply you need to add or install antd

npm install antd
yarn add antd

Open your app.js file

Now we are using the <ConfigProvider/> antd component for aur basic styles

import { Button, ConfigProvider } from "antd";
import "../styles/globals.css";
 
function MyApp({ Component, pageProps }) {
  return (
    <>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: "#D23369",
          },
        }}
      >
        <Component {...pageProps} />
        <Button type="primary">Primary Button</Button>
        <Button type="default">Default Button</Button>
        <Button type="default" ghost>
          Ghost Button
        </Button>
      </ConfigProvider>
    </>
  );
}
 
export default MyApp;

Output: