Extend Next.js' default Document class to ensure styles are rendered on the server
In this lesson, we learn how to modify Next.js' custom Document to ensure that our custom components are rendered on both the client and the server. Components in this lesson are built using the emotion-js library.
Nowadays this is not needed. Follow the example here: https://github.com/zeit/next.js/tree/canary/examples/with-emotion
Basically using babel-plugin-emotion you are able to avoid any modification to _document.js. Just create a .babelrc file at the root of your file and write:
{
"presets": [
"next/babel"
],
"plugins": [
["emotion"]
]
}That's it, with this you'll achieve SSR for your styes.
Hey Felipe, thanks for pointing out! This setup isn't necessary anymore however it was at the time that this lesson was created.
That said, I'm pretty sure that it's no longer necessary to modify the .babelrc file. You might receive some advantages from using the babel-plugin however documentation on SSR state that it should work out of the box.