From the course: Next.js: Creating and Hosting a Full-Stack Site

Unlock this course with a free trial

Join today to access over 24,900 courses taught by industry experts.

Solution: Creating a navigation bar

Solution: Creating a navigation bar - React.js Tutorial

From the course: Next.js: Creating and Hosting a Full-Stack Site

Start my 1-month free trial Buy for my team

Solution: Creating a navigation bar

“

(upbeat music) - [Instructor] All right, well hopefully you've given this challenge a try. Let's take a look at how I solve this challenge. So the first thing that I did was I created a new component for the nav bar. And you didn't need to do this, but it's generally a good idea to keep things modular like this. So I just said New File inside the app directory. And then I said, NavBar.tsx. Cool. And inside this file, what I did is I started off by importing the Link component, hopefully you remembered that part, from 'next/link'. And now that I had that, I could start creating the nav bar component by saying export default function. And then we'll just call this NavBar like so. And here's where the JSX comes in. I started off by putting this inside a nav tag. And just as an aside, you may wonder if h1 tags and h2 tags and tags like that don't have any effect with Tailwind CSS, what's the point of still using these tags, right, such as nav or h1, things like that? Well, the reason has…

Contents