Add Styled Components to a Next.JS Project
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.