Next.js Tutorial #6 - Adding Styles

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

[kiche_allan]

One day you will get Nobel Prize for all free stuff you have added here. The way how you explain things, how you edit videos, and your voice, is somehow how teaching should look like. Thank you. Net Ninja is the best

[maskman]

~Notes~
CSS in Nextjs
There are a couple of ways to style component, for example, global style and modules.
Global style
1. create a global.css file under styles directory
2. import global.css in root component (_app.jsx)
CSS modules
1. if we want to create a css module for about page component, we create 'About.module.css' (this is the naming convention) file under styles directory.
2. import css module in about component, example,
import styles from '../styles/About.module.css', 'styles' is a variable which we can name it whatever we like.
3. if we want to style element, we implement this way:
<div
thats it !!!

[ayushdedhia]

Best Programming Channel on YouTube ❤️🔥🙏

[SamLuvsPizza]

Yes king! Everyday during my lunch break I check to see if the courses are uploaded and its always a good way when I get to spend break learning some Next.js

[carmint]

Home Module CSS:

.title {
color: #333;
padding-bottom: 20px;
text-align: center;
}
.text {
color: #777;
}
.btn {
display: block;
width: 150px;
padding: 8px 0;
margin: 20px auto;
background: #4979ff;
border-radius: 4px;
color: white;
text-align: center;
}

[xexpertx]

You're such a good teacher I feel like I'm watching a CS level 100 course, anyone can learn this

[szymonfrankowski]

You are a great teacher! I love your every tutorial that I have been watching so far.

[rizqisyaifulrijal]

your explanation is clean and clear. Thank you.

[MS-xuks]

I was struggling while using Next for my project and then you came and made it look easy for me. Thx Ninja 🔥

[marcinkalmar]

learning became more better with good explanation and good energy from teacher

[CamiSheep]

I love how in all of his tutorials whenever he says "I'm just gonna grab my css from the repo" he gives us a peek and says woohoo hahahahaha

[neutrallane]

How can we add multi classes in nextjs, e.g, className ="one two three" ?
And how do we use bothe className and id selectors in nextjs ?

[martinklasson]

I just installed the nextjs, and run yarn dev. And it gives me error directly that "Global CSS cannot be imported from files other than your Custom <App>".

Strange - since I havent touched any of the sample code installed.

[Schokocraft]

what is the advantage of this compared to usual css names?
Like it works with local styles in vue for example

[mikethorpe]

what's the syntax for adding multiple classes to a single component in next.js ??

[nws]

Thanks so much for these videos. You are an excellent teacher!

[LatinoWebStudio]

Do you know if there's a way to add page specific styles without module.css? It's because I have an onclick event where I add a class name, so, since that class name isn't added by the {styles.className} it doesn't get applied.

[bimalgrg]

I am using tailwind css for my React app and it's awesome.

[HoTKreeZy]

Hi,
First : thank you for your videos.
I have a question : How can I add 2 css classes to 1 element ? The only solution I found is the following => <MyElement className={styles.class1 + " " + styles.class2} > </MyElement> but while it's acceptable if I want just 2 css classes but not for more... is there any solutions ? Thank you for your answers.

[jackw.]

You said that we need to use selectors like classes, but can I nest classes? Example: .nav .a { color: black }?