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;