Have you tried using Styled-Components with your Next.js app but can't get the styles to load properly? This is because the server-side rendering d...
For further actions, you may consider blocking this person and/or reporting abuse
I had the same problem with a plugin to prerender react app. HTML would load before the styling and for a split second elements would be a mess. Didn't find a solution there.
Now had the same issue with a production version of next.js, but this trick saved the day. Thanks.
This worked, BUT...
I used this and it worked flawlessly. But now how to I add new fonts to my Next JS app with google fonts. This process involves my _document.js file and I don't know what to do: nextjs.org/docs/basic-features/fon....
This was really helpful, thanks
Works great thanks.
Thank you so much bro!
Merci beaucoup mon ami. This solved the issue that cost me hours. I am grateful
Thanks!
Thank you so much it worked like magic
Thank you so much for pointing this out!!! Totally mindboggling style problems have been unboggled.
thank you so much! it worked very well!
Thank you
nice thanks,, you saved the first render FLICK with materialui & nextjs too
Thank you so much, you saved my deployed app on Heroku. I also added the .babelrc config below to enable my app to work well.
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]],
}
wow this saved me, thanks!
A Hero whitout a cape
this worked so well you can also create a
.babelrc
at theroot folder
of your project and add the following code.if you are using
style-components
For typescript project,
in _document.tsx
Use the following code.
or
Follow this link
Using styled components with next.js 12 and typescript in 2022
Sumukhakb ・ Mar 7 ・ 3 min read
for those using typescript nextjs template
It works like a charm!
Thank you. It helped-me a lot. God bless your soul.
YOU RE AMAZING! Thank you so so so much!! I've been struggling with this for 2 days, I was about to give up using styled components.
Thank you!
You saved my day. 🙏
Hello!
Where i can find the _document.js please ?
I can't find it on the next js github repo !
github.com/vercel/next.js/blob/mas...
Thank you so much!!
Thanx a lot. I forgot this after adding _app, and lost 9hours to debug why in production styles broken🙃
Life saver
God bless your soul
Thanks
thanks! worked for me too!
Thank you so much!
Works Great