Flash of Unstyled content using Ant Design with Nextjs

[useCallback]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:08:47 PST 2022; root:xnu-8792.61.2~4/RELEASE_X86_64
    Binaries:
      Node: 16.15.0
      npm: 8.5.5
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.8
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

Which example does this report relate to?

with-ant-design

What browser are you using? (if relevant)

Chrome 112.0.5615.49

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Flash of Unstyled content using Ant Design with Nextjs :

When using Ant Design with Next JS
the HTML gets rendered unstyled ( barebone HTML elements) for a fraction of a second , and then the styles get loaded and the components are rendered correctly

Expected Behavior

the first contentful-paint should be properly styled

To Reproduce

clone the with-ant-design example and host it

[imaksp]

it may be because this example does not use any provider from antd, you can use this official example from antd for SSR:
https://github.com/ant-design/create-next-app-antd

[Shubhdeep12]

Hi, just want to confirm - is this issue fixed?

[jeremypeters]

Just came across this issue - https://github.com/ant-design/create-next-app-antd is not suitable when using the app folder structure though.

[sujalcodes3]

I am new to this repository. I would love to work on this issue. Can you guide me how to further approach this issue.?

[alexrohleder]

I solved this by setting the @ant-design/cssinjs version resolution on my package.json:

{
  "resolutions": {
    "@ant-design/cssinjs": "1.17.2"
  }
}

I'm using the Next.js 13.5.1 app dir and AntD 5.10.2.

[sambatlim]

@alexrohleder solved my problem. I recommed you to read Antd documentation to find which "@ant-design/cssinjs" version that you should choose.