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,800 courses taught by industry experts.

Using Next.js Links

Using Next.js Links - 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

Using Next.js Links

“

- [Instructor] All right, so now that we've created the products list, let's see how we can link each of the items in the product list to the product detail page. Now there's some special logic that we need to add in order to actually tell what product we want to display when we go to the product detail page, and we're not going to do that quite yet. For now, we'll be content with simply going to /product-detail when we click on one of these items, okay? So in order to do this, what we're going to need to do is open up our ProductsList component. And what we're going to need to do here is use a special Link component provided by Next.js in order to make this happen. There's a reason why we can't just use a regular A tag from HTML to make this happen, and I'll explain that in a little bit more detail shortly. For now though, what we're going to do is in addition to the image which we're importing from next/image, we're going to import link from, you guessed it, next/link. So there we…

Contents