antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.

[bbhxwl]

Summary

Additional information

No response

Example

No response

[icyJoseph]

The link seems to have moved to:

• https://ant.design/docs/react/v5-for-19

You need to install a compatibility package, because of changes made in React 19.

Since React 19 adjusted the export method of react-dom, antd cannot directly use the ReactDOM.render method. Therefore, using antd will encounter the following problems...

[icyJoseph]

I think some historic context is due here. Pages Router behaves, sort of, more similarly to what you describe. You'd use a data-fetching function, and that data you'd pass down to the React tree.

In App Router, you can fetch data where you need it, and have the option, to mark a boundary, between the server and the client.

As with other things in life, it depends. What do you want to do with the data?

For example, if you want to filter it and such, using whatever the server sent as initial input, then yes. However, in other apps the applied filters might be in the search params, and then you just need code to update the url, when the filters are applied, or maybe use a cookie, etc... .

Recently, Dan Abramov has been writing about this exact concepts. The last articles are all, more or less, different takes on the same concepts. I think maybe you want this section specifically:

• https://overreacted.io/impossible-components/#a-sortable-list

But, do read the latest, 5 or so, articles they publishes this year.

[bbhxwl]

I think some historic context is due here. Pages Router behaves, sort of, more similarly to what you describe. You'd use a data-fetching function, and that data you'd pass down to the React tree.

In App Router, you can fetch data where you need it, and have the option, to mark a boundary, between the server and the client.

As with other things in life, it depends. What do you want to do with the data?

For example, if you want to filter it and such, using whatever the server sent as initial input, then yes. However, in other apps the applied filters might be in the search params, and then you just need code to update the url, when the filters are applied, or maybe use a cookie, etc... .

Recently, Dan Abramov has been writing about this exact concepts. The last articles are all, more or less, different takes on the same concepts. I think maybe you want this section specifically:

• https://overreacted.io/impossible-components/#a-sortable-list

But, do read the latest, 5 or so, articles they publishes this year.

I have read the article you sent me and understood the basic principles of Next.exe design. It is necessary to analyze the server-side component to obtain data, and then develop something about responsive data and events using client-side components. So developing such a page requires at least two different files, which cannot be implemented in one page.tsx. What is the recommended server for obtaining data in NextJS? Which library has the highest usage rate? Axios?

[bbhxwl]

I think some historic context is due here. Pages Router behaves, sort of, more similarly to what you describe. You'd use a data-fetching function, and that data you'd pass down to the React tree.

In App Router, you can fetch data where you need it, and have the option, to mark a boundary, between the server and the client.

As with other things in life, it depends. What do you want to do with the data?

For example, if you want to filter it and such, using whatever the server sent as initial input, then yes. However, in other apps the applied filters might be in the search params, and then you just need code to update the url, when the filters are applied, or maybe use a cookie, etc... .

Recently, Dan Abramov has been writing about this exact concepts. The last articles are all, more or less, different takes on the same concepts. I think maybe you want this section specifically:

• https://overreacted.io/impossible-components/#a-sortable-list

But, do read the latest, 5 or so, articles they publishes this year.

I set up the installation tutorial, but it doesn't seem to work。
Also, if I group like this, can't I make sure all groups share the same code? Because I want the homepage application to have the same layout

import '@ant-design/v5-patch-for-react-19';
import { AntdRegistry } from '@ant-design/nextjs-registry';
import "@/app/globals.css";

[icyJoseph]

Interesting, I haven't worked much more with antd, did you check their issues list to see if someone had run into this? I only found this, ant-design/ant-design#53736 not sure it is relevant at all

[VladimirDmytriienko]

Does anyone now how to fix it in next js

?

[Cygra]

I downgraded react and react-dom to ^18, removed .next and node_modules, run npm install, start the project, and the warning still appears.

[abue-ammar]

I downgraded react and react-dom to ^18, removed .next and node_modules, run npm install, start the project, and the warning still appears.

same it still appears i am in react 18.3.1

[zhangshourui]

Did you removed package-lock.json?

[Cygra]

Did you removed package-lock.json?

yes, and it's still there

[abue-ammar]

i found the solution guys. npm install @ant-design/v5-patch-for-react-19 --save install this and import it to your main.tsx at the top import '@ant-design/v5-patch-for-react-19';

[Shanmugamrskfamily]

I resolved the React 19 + Ant Design v5 compatibility warning with the following setup in my Next.js 15.5 project:

1. Installed Compatibility Packages

npm install @ant-design/v5-patch-for-react-19 --save
npm install @ant-design/nextjs-registry --save

2. app/layout.tsx Configuration

• The very first import (before any other):

  import '@ant-design/v5-patch-for-react-19';

• Then import Antd SSR component and wrap your app inside <AntdRegistry>, e.g.:

  import { AntdRegistry } from '@ant-design/nextjs-registry';
  import "./globals.css";
  // ...other imports as needed
  
  export default function RootLayout({ children }) {
      return (
          <html lang="en">
              <body>
                  <AntdRegistry>{children}</AntdRegistry>
              </body>
          </html>
      );
  }

• Note: Attaching a screenshot of my actual app/layout.tsx file below.

3. package.json Scripts

• Disable Turbopack as it caused patching issues:

  "dev": "next dev",
  "build": "next build"

• Also attaching my full package.json screenshot for reference.

4. Cleared the Build Cache

• On Windows:

  rmdir /s /q .next

5. After Restarting, No Compatibility Warning

• The Antd warning:

  Warning: [antd: compatible] antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for compatible.

• No longer appears, and all Antd components function properly.

[ossqui]

It worked perfectly for me. The warning is actually a pain. Thanks.

[priyaanshusoni]

Actually the issue was causing due to turbopack actually , Follow these three steps only.

1. import '@ant-design/v5-patch-for-react-19' at the top of layout.js file in Next.js
2. disable turbopack in package.json
3. restart the application again , it will work.

[masoudkaarimi]

I fixed the React 19 + Ant Design v5 compatibility warning by putting the Ant Design setup inside a "use client" component.

Here’s the simplified version that worked for me:

"use client";

import '@ant-design/v5-patch-for-react-19';
import { ConfigProvider } from "antd";
import { StyleProvider } from "@ant-design/cssinjs";
import { AntdRegistry } from "@ant-design/nextjs-registry";

export function AppProviders({ children }) {
  return (
    <AntdRegistry>
      <StyleProvider layer>
        <ConfigProvider>
          {children}
        </ConfigProvider>
      </StyleProvider>
    </AntdRegistry>
  );
}