New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fixed #48483 #49694
Fixed #48483 #49694
Conversation
Fixed issue vercel#48483 by adding a Head tag with the a link to the ant design css. I did this because the issue was related to server-side rendering, where the HTML generated on the server did not include the necessary CSS styles for the Ant Design components, leading to a flash of unstyled components on page load. By adding the <Head> tag and including the necessary CSS styles, we were able to ensure that the CSS is included in the HTML generated on the server, thereby avoiding the flash of unstyled components.
@@ -26,6 +28,10 @@ export default function Home() { | |||
} | |||
|
|||
return ( | |||
<div> | |||
<Head> | |||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd/dist/antd.css" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks for the heads up ! I'll make the necessary changes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @B2o5T
I have made the changes according to your suggestion.
To prevent the flash of unstyled content in my Next.js application, I added a custom Document component. In this component, I included a link to the Ant Design CSS stylesheet within the <Head> section. This ensures that the styles from Ant Design are loaded and applied to the page during server-side rendering (SSR). By extending the default Document component, I was able to customize the HTML structure of the page and include the necessary styles, providing a seamless and styled user experience
Hi @B2o5T could you review my pull request? |
Hi, I am not part of Next.js team, ping them instead |
@leerob @steven-tey Could you review my pull request? |
Closing this out, as we'd like to move the example to use the App Router instead 🙏 |
What
Fixed issue #48483- There was a flash of unstyled design in the with-ant-design example in the repo.
How
Created a _document.tsx file with a head component with a link to the ant design stylesheet.
Why
To prevent the flash of unstyled content in my Next.js application, I added a custom Document component. In this component, I included a link to the Ant Design CSS stylesheet within the section. This ensures that the styles from Ant Design are loaded and applied to the page during server-side rendering (SSR). By extending the default Document component, I was able to customize the HTML structure of the page and include the necessary styles, providing a seamless and styled user experience.