Flash of Unstyled content using Ant Design with Nextjs

useCallback commented 1 year ago

Verify canary release

[X] 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 commented 1 year ago

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 commented 1 year ago

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

jeremypeters commented 1 year ago

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 commented 10 months ago

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 commented 7 months ago

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 commented 7 months ago

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

vercel / next.js

Flash of Unstyled content using Ant Design with Nextjs #48483