DEV Community

Cover image for How to add Style-components to Next.js and start using it 🤪
Tiago Brito
Tiago Brito

Posted on • Updated on

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

#javascript #tutorial #react #css

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
Enter fullscreen mode Exit fullscreen mode

if you are using yar run:



yarn add styled-components
Enter fullscreen mode Exit fullscreen mode

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



  "resolutions": {
    "styled-components": "^5"
  }
Enter fullscreen mode Exit fullscreen mode

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

Image showing where to add the code above

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👇
Image with sample of old style

You can have it like this👇
Image with sample of new styles

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 👇
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skahwvnfgx5qe83scuwd.png)


So your file will look like this 👇
![Image showing how the file should look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pixaa82re0edsq59p5mv.png)


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


![Image showing the class names with a random code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbrn78e914gipizw1l3p.png)

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 {% raw %}`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 }]]
}
```

![Image showing the file to be changed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjsbq0zu81uscc1925rn.png)


and voila 💃

![Image showing that the class name has the component name in it.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr3zw2por7trnwsotb29.png)


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 👋
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
roarnald profile image
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/...

Collapse
 
dzienisz profile image
Kamil Dzieniszewski • • Edited

styled-components is not a dev dep

Read next

nozibul_islam_113b1d5334f profile image

New to Frontend Engineering: 8 Things To Stop Doing

Nozibul Islam -

miriacode profile image

How I built my first mechanical keyboard [Tutorial] [Part 1]

Miriam Acuña -

shieldstring profile image

Data Fetching in React

Agbo, Daniel Onuoha -

wafa_bergaoui profile image

Optimizing React Components with useMemo and useCallback

Wafa Bergaoui -