Building High Performance Web Apps with Emotion and Next.js
If you haven’t heard of Emotion yet, it’s one of the fastest CSS-in-JS libraries to date. Its API is similar to styled-components but delivers your stylesheets over 200x faster. If you don’t believe me, check out @tkh44’s article here or the benchmarks you can run on your own here.
Under the hood, Emotion uses a babel plugin to parse your CSS and constructs style blocks from your components. It reads those blocks with PostCSS, manipulates them and writes template literals back with babel. It’s the reason why Emotion is so fast: it takes care of all the expensive operations like parsing nested rules and prefixes ahead of time.
When you combine an awesome server-rendered experience like Next.js with Emotion, you get a high performant website right out of the box.
The easiest way to get started is by using
create-next-app to generate a brand new project.
create-next-app takes the same approach
create-react-app does but it generates a Next.js project instead. It’ll install all the dependencies you need ahead of time and put together the base project.
Run the following to get yourself started with Next.js and Emotion:
yarn global add create-next-appor
npm install -g create-next-app
yarn add emotionor
npm install —-save emotion
yarn is an alternative package manager to
npm that strives for high performance and security. You can read more about it at yarnpkg.com or get started with it right away by running
brew update && brew install yarn in your terminal.
For Next.js and other server-rendered libraries, Emotion requires an additional step of adding an
inline-mode configuration to your babelrc. If you were using
create-react-app or a single page app with no server rendering, you could skip this step.
Extract vs. Inline Mode
Extract is how Emotion works out of the box. It’s the “high perf” setting if you’re not worried about IE11 or below and aren’t doing any server rendering. The reason why its faster is because it skips the prefixing step older browsers require.
Inline Mode is the “safety net” setting that is just a smidge slower but supports every browser React does and supports server rendering. If you’re developing for a wide audience of people and browsers, this is the mode you want to go with.
Emotion supports almost every technique and API you’ve loved when it comes to CSS-in-JS libraries including raw CSS files. It makes porting your project over from virtually anything a breeze!
const Avatar = styled(‘img’)` width: 100px; height: 100px; `
I love Emotion because it supports a lot of the same features I was looking for when comparing different CSS-in-JSS libraries except offering incredible performance we all strive to achieve.