Add Styled Components to a Next.JS Project

Yoni Weisbrod
InstructorYoni Weisbrod

Share this video with your friends

Send Tweet

Next.JS works with any CSS-in-JS solution, including Styled Components. But to get it working with Next.JS's server-side rendering, you'll need to do some configuration.

In this lesson I go through the steps required to get it working properly, including adding babel-plugin-styled-components to your project and overriding the Document page to inject your styles into the <Head> of the page.

For reference, please see Styled Components' guide to SSR, and the Next.JS sample repository for Styled Components.