From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
CSS modules and Next.js optimizations with layout
From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment
CSS modules and Next.js optimizations with layout
Okay, so let's talk about styling, looking sharp. You know, life is all about presentation. It's all about looking good and being good looking, or as Zoolander says, really, really ridiculously. Ridiculously good looking. So if we go into our styles folder that Next.js gives us, does give us a styles folder. We talked about this global CSS in the home module. Now make sure that you have these. If not, go back to the first video in the section where you can download the project. All right, so the CSS module basically allows us to locally scope CSS at a component level by creating these unique class names. That's what the modules does. So you can use the same CSS class name in different files without worrying about class name collisions. That's kind of brilliant because now we're accessing the modules specifically from those specific files, and we don't have to worry about the names collisions, which can tend to happen when you're writing a lot of CSS. So in addition to CSS modules, we…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Download the CSS starter kit project from Next.js official7m 27s
-
(Locked)
How images optimize with Next.js5m 31s
-
(Locked)
Scripts and header data and props with Next.js6m 58s
-
(Locked)
CSS modules and Next.js optimizations with layout7m 12s
-
(Locked)
Global styling with Next.js4m 47s
-
(Locked)
Customizing utility styles with Next.js9m 55s
-
(Locked)
Metadata for SEO and social media with Next.js6m 43s
-
(Locked)
Writing dynamic layout components with Next.js11m 31s
-
(Locked)
How to use children and props in React and Next.js10m 54s
-
(Locked)
-
-
-