Styling NextJS | Styled Components, CSS, SCSS, others | Next JS Tutorial #5 for Beginners

Topic/Point/Questions covered in this video of React Next JS Tutorial in Hindi for Beginners:-
next js css
next js global css
next js css modules
next js import global css
next js scss
next js styled-components
next js global scss
next js import css from node_modules
use bootstrap in next js
use emotion/styled in next js

#stylingNext #cssInNextJS #nextJSTutorial #reactJSTutorial #hindi #ILive4Coding

Books which inspire me and you must read this once:-



About the channel:-

Welcome to your own channel ILive4Coding, this channel is for all
those who love to code, the channel consists of all video related to
programming world of Javascript, ES6, jQuery, NodeJS, ReactJS, Redux, and other Web development and JS Platforms,
frameworks.

You can have a look at our other videos:-

About Me:-

I am Ronit Mukherjee from India, I work as a Senior Software
Engineer in a big MNC in front-end development.
I have experience of more than 7 Yrs in this field and have also
worked as a trainer too.

For more details feel free to connect at

[RamuRamu-eusx]

Sir I'm creating API from laravel with sanctum, can you make authentication system for next.js using laravel API,

[a-kayeditszone]

Hello sir thankyou for the amazing tutorial 😍😍

[rajib]

great tutorial. well organized and so much information. thank you ilove4coding

[mohakmaheshwari]

Bootstrap kaise use kiya kuch smjh ni aya.... sab kuch to advance mein hi krke rrkha hai

[hicodeguru]

how can i apply multiple class names ?

[diptanshupathak]

How to use custom.css after bootstrap, indexing of css file

Example:- bootstrap have .btn class
Agar mai global.css mai .btn {color:red} kru, or chahu ki phle meri html global.css ka code read kre or bad mai bootstrap.

Kiase hoga ???

- bootstrap.css (secondary)
- global.css (primary)

[vishalgupta-wpsy]

Awesome Video no 1 tutorials series on nextjs . Bro keep it up such impressive video

[hicodeguru]

thanks for detailed info.. now in my component if i have created nexted scss class.. .abc { .def {}}, how i will use it ?

[satenderaryan]

Bro slick slider ke liye node modules se kisi perticular component me css kaise use karte hai plz wo b bata do

[subhrajitmazumder]

I have three questions.
1) From where we can find the bootstrap css
2) Is it preinstalled with this framework or we need to install them manually?
3) If manually installed, then how can I know that it is installed or not.
4) Can I use both scss and styled-components together? If yes, then what is the process.
I have manually installed using "yarn add bootstrap" command but can't find the inside node_module.

I have tried to use both scss and styled-component together, but no change happend.

import React from 'react';
import Link from 'next/link';
import styles from './Post.module.scss';

const Header3 = styled.h3({
fontSize: "18px",
marginTop: "60px"
});

const AnchorTag = styled.a(
props => ({
fontColor:props.fontColor,
fontStyle:props.fontStyle
}));

export default function Post({ id, title, body }) {
return (
<>
<Header3>
<Link href={"/posts/[id]"} as={"/posts/" + id}>
<AnchorTag fontColor={styles.postLink}
</Link>
</Header3>
<p>{body}</p>
</>
);
}


Please help

thanks

[tanjirmahabub]

Missing bootstrap scss, variables, function import

[mamunrahaman]

I create components folder into post folder and in component folder i create Post folder and in Post folder i create Post.js ..as like you create in this tutorial.. When i execute next build command i get this error below:

Error occurred prerendering page How can i slove this?

[satenderaryan]

Bro ek cheez or explain kar do jab _app.js file use karte hai toh baaki ke structure me kya change karna hota hai kyuki main bina _app.js ke bana raha tha

[bhagyeshpatel]

Hello sir,
How can we add multiple classes in div, ul, section etc.?

[rodbrowning]

Im might be crazy but this is not English at all

[satenderaryan]

Style jsx aapne css waale video missed kar diya

[Luh-RodriguesF]

Stupid thing! Title in English, greetings in English, then out of nowhere he changes to another language. Put the title IN YOUR LANGUAGE!