Check out a free preview of the full Build an AI-Powered Fullstack Next.js App, v3 course

The "Navigation" Lesson is part of the full, Build an AI-Powered Fullstack Next.js App, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Scott adds a couple of navigation links to the left side of the application to navigate to the home page and to the journal page.

Preview
Close

Transcript from the "Navigation" Lesson

[00:00:00]
>> We could do a nice little spinner here and show some thing, but I'm not gonna add it cuz I wanna focus on some of our AI stuff. We got two more AI features I wanna get to and if you wanna see a spinner you can look at the code I have them get up.

[00:00:11]
It's just like four lines of CSS, so. Okay, let's get to the, actually I do want to add some links here on the left cuz it's bothered me that I can't click on it. So that's what I'm gonna do. I'm gonna go to journal layout, and we're gonna go to this aside.

[00:00:38]
I'm gonna drop some links in here. So I'm gonna make some links over at the top. I'm gonna make some links for it's gonna say href and that's gonna be that. It's gonna be home and then it's label as home and then, I'm gonna make one for journal so we can go there.

[00:00:56]
Let's label this journal. There we go, so much better. And then in aside, I'll just put the div here for mood. That's our logo and then underneath here it'll just be a ul with some li's in it. So I'll just iterate over the links, grab a link Return an li.

[00:01:26]
As a link tag from next/link, put an href of link.href and the value is link.label. Add the key here of link.href. There we go. I know this is gonna look janky, so I'm just going to add some classes now. I already know it's gonna look bad, px of 2, py of 6.

[00:02:04]
And text of xl. That should be good enough. It's still gonna look like crap but cool. You don't have to add these if you don't want to. I'm just adding so I can actually click on something without having to go to the URL and change the URL. It was bothering me

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now