From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
Start on the navbar - Next.js Tutorial
From the course: Next.js 14 from Scratch: Build a Real-World Project Using Next.js 14 and MongoDB
Start on the navbar
All right, so we're gonna start on the navbar and there's gonna be quite a bit of code in this navbar component There's gonna be a lot of HTML and then we're gonna be adding authentication We're gonna show the number of messages and the little notifications number So it's it's gonna you know add up through time and even in this video. We're gonna add a lot of HTML now Since I know a lot of you guys don't like to copy a bunch of HTML or a bunch of code and then paste it and change a bunch of stuff, I've actually included a file with this section called navbar.jsx and it's the code up to the end of this video. So if you want, you can grab the code from there. If not, I'm going to go ahead and show you exactly what you need to copy from the theme files. All right, now before we do any of that, let's first create our component file. And the components folder, I'm going to put in the root. So we're going to create a folder called components. And you might see components in the app folder…
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)
New project and folder structure6m 13s
-
(Locked)
Layout, homepage, and metadata10m 47s
-
(Locked)
File-based routing7m 16s
-
(Locked)
Server vs. client components and router hooks9m 44s
-
(Locked)
Start on the navbar10m 3s
-
(Locked)
Navbar links, drop-downs, and React icons12m 28s
-
(Locked)
Active links and conditional rendering11m 48s
-
(Locked)
Homepage components15m 45s
-
(Locked)
Properties page7m 26s
-
(Locked)
Property card dynamic data14m 41s
-
(Locked)
Home property listings7m 42s
-
(Locked)
Custom not found and loading pages5m 58s
-
(Locked)
-
-
-
-
-
-
-
-