Add Styled Components to a Next.JS Project

Yoni Weisbrod
InstructorYoni Weisbrod
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

Instructor: [0:00] When you install a new Next.js project, you already receive support for CSS-in-JS using one specific library called Styled JSX, but you can actually use any CSS-in-JS library you want. Let's install styled-components to this project.

[0:15] Once we have the styled-components npm package installed, we're going to go into our Next project, go into the home page, and remove all the styled code that we currently have from the Styled JSX library. We'll also remove whatever boilerplate code was in that component and add a new styled component called header.

[0:35] Now we'll import the styled object from styled-components. We'll define the header component with a color and font family and also give it some content so that we'll know when styled-components are working.

[0:49] When we run our server, we can see that styled-components is working, but the problem is there's a little jump right at the beginning. That's because styled-components is failing on the initial server-side rendering.

[1:00] To get this to work, we have two great resources on the topic. We have styled-components' Advanced Guide, which covers server-side rendering. Next.js also includes an example of how to make this work.

[1:13] Following their instructions, we see that the first thing we need to do is to install the babel-plugin-styled-components via npm. Once we have it installed, we're going to go to our babelrc and configure it to work properly, making sure to set server-side rendering to true.

[1:31] The next thing we're going to do is to create a new document.js file, which is how we're going to override Next.js' built-in document file. At this point, I'd recommend going to the Next.js sample repository and just copying and pasting the logic here into your own file.

[1:51] Let's go through what we've done here. styled-components exports an object called ServerStyleSheet that we can use to collect the styles from our app. We're going to get the initial props that would have arrived at the parent document by calling getInitialProps from the parent. We're going to add to the styles that we return our new style sheet.

[2:11] This way, we're going to inject our styled-components styles into the head of the document. Now when rerun our dev server, we can see that styled-components is still supported, and it works for server-side rendering.

egghead
egghead
~ a minute ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today