From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Linking and navigation

Linking and navigation - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Linking and navigation

“

So, right now, we have created the header component, which has the links to traverse through all the routes. But the linking is done using the anchor tags, which is not the most ideal way for linking and navigation. Instead, the better approach is to have a single page application so that the loading times are omitted along with other optimization benefits. So with the app router, we use the link component instead of the anchor tag, which enabled the single page application features. In pages router, we follow the same procedure. So here in the header component, we will replace the anchor tag with the link component. Let me update the rest as well. Alright, now let's save and check the output. So as you can see, still the page is reloaded on clicking the links, which means that this is not a single page application. The reason for this malfunction is that the header component is configured in the document js, which is actually rendered on the client side. So to make sure that the link…

Contents