How to add Style-components to Next.js and start using it 🤪

In this tutorial, I'll show you how to add Styled-component to Next.js. If you don't know how to create a basic app with Next.js I'll suggest to you first read this post here

For this tutorial, I'll use:

I'll use VSCode for our example here, but you can use any other code editor that you prefer.

How to instal Styled Component? 🤔

On your terminal go to your folder project.
if you are using npm run:

npm install --save styled-components

if you are using yar run:

yarn add styled-components

PS: If you use yarn it is recommended that you go to your package.json file and add the following.

  "resolutions": {
    "styled-components": "^5"
  }

This is to avoid many problems that can happen from multiple versions of styled components being used on your project.

Congratulations 👏 🎉 you add Styled-component to your project, easy right?

Well, how do I use it now?🤔

Styled components use tagged templates literal to style your components. So you can give names to H1, p, button tags and so on, it helps to debug and make your code much cleaner to read in my opinion.

So instead of having a component like this👇

You can have it like this👇

But how do we do it?🤔

Simple, first we need to import the style from the styled component like so 👇

import styled from "styled-components";

and then export a const with the name you choose with the styled template literal like below 👇

So your file will look like this 👇

Then styled components will generate the tags and add unique classes to your tags.

But it also makes it super hard to debug later, as you just have an h1 or div and trying to find which one is not working will be crazy.

To solve this issue we can run in our terminal the following:
If you use yarn

yarn add babel-plugin-styled-components --dev

If you use npm

npm install --save-dev babel-plugin-styled-components

We will need to create a file called .babelrc at the root of our project.
and add the following code:

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true, "displayName": true }]]
}

and voila 💃

Now the const name we created Title will be added to our tags as part of the class names, making our lives so much easier

Now for the real congratulations 👏 🎉 👏 🎉
We just added styled components to our project and learned how to start using them.

We are the champions

What next?

Well, this is just the tip of the iceberg, Styled components have so much more to be explored that I'll have new posts about it soon.

Until next time 👋

Comments

[roarnald]

Good guide! However, do note that using '.babelrc' would disable NextJS 12's own Rust SWC, making it act like Next 11. If anyone is looking to implement displayName to Next 12, heres the official doc: nextjs.org/docs/advanced-features/...

[Kamil Dzieniszewski]

styled-components is not a dev dep