fbpx
How to configure antd version 5 with Next.js and React.js
by: Muhammad Junaid
-
December 10, 2022
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:

Share Article:

Leave a Reply