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 {% 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 }]]
}
```
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 👋
Top comments (2)
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/...
styled-componentsis not a dev dep