This package encapsulates the Advanced Approach of doing SSR in Emotion 11, adapted for Next.js.
The code is quite simple, so if you need more customization (like using a non-default EmotionCache), it's easy to copy it to your project and do the necessary changes.
Indeed, if you're happy enough with Emotion's Default SSR Approach, you don't need this package.
However, this Default Approach creates one <style>
tag per component, and
inserts them in the DOM, individually, wherever your component appears. This can
unnecessarily increase your bundle size, and create problems with :nth
selectors, as the docs note.
In contrast, the Advanced Approach removes all this individual <style>
tags, and concatenates them into a single one. It does so without losing any
functionality, so it's strictly better in my eyes.
However, the docs are not especially helpful in teaching how to set it up, and
getting it to work with the idiosyncrasies of Next.js
can take some time to
work out (it did for me!). That's why I created this package.
We assume that you already have @emotion/react
, next
, react
, react-dom
installed. If you don't have them, use this command to install them:
$ yarn add @emotion/react next react react-dom
Then install this package with:
$ yarn add @cprecioso/next-emotion-ssr
If you're only using
@emotion/styled
components, you can stop
here. However, if you're going to use
the css
prop, or want to take advantage of
the
@emotion/babel-plugin
functionalities,
you should
install and configure them.
Then create a pages/_app.jsx
or pages/_app.tsx
file and write:
export { EmotionApp as default } from "@cprecioso/next-emotion-ssr"
Similarly, create a pages/_document.jsx
or pages/_document.tsx
file and
write:
export { EmotionDocument as default } from "@cprecioso/next-emotion-ssr"
If you have a custom
Document
orApp
already, you can wrap them in themakeEmotionApp(YourAppComponent)
andmakeEmotionDocument(YourDocumentComponent)
functions exported from the package.