Server side rendering in Next.js with styled-components, styled-jsx, and emotion

I wanted to use react-select which uses emotion on a project that was already using styled-components, but I couldn't seem to find how to do this anywhere so I banged my head against the wall for a bit and figured it out. I also added styled-jsx recently to compare render performance and ergonomics.

For the sake of saving people an hour or two, here is how I did it:

Tested on:

• next@8.0.3
• styled-components@4.1.3
• styled-jsx@3.2.1
• emotion-server@9.2.10

Your _document.js should look something like this:

This could probably be optimised further but I haven't had time to look at that yet.