Within a next JS application, you should not use the native dom a element also called the anchor tag, and instead you need to use the next JS provided link component. It offers a number of features and a core advantage is that instead of full page reloads, it allows partial rendering. To demonstrate this, we have a very simple next J application that renders out a common header across our website using a root layout component. The header is pretty simple. In addition to rendering a simple div, it is also going to log out whenever the component is going to get rendered.

With this infrastructure in place, we are going to have a few pages that use the native AAG directly. We have the homepage that links to alpha and the beta pages, and then the alpha page links to beta page and the beta page links to alpha page. This will allow us to observe the behavior of using the native AAG directly within our next year's application. Let's take a look at this website. Within the browser, within the homepage, we see the header welcome to the site, along with links to alpha and beta. Additionally, we can see that the header was rendered

when this page was loaded. Now, as we navigate to the different pages using the native anchor component, you can see that the header is going to get rendered again and again. This points to the fact that the whole application is getting reloaded as we navigate to the different pages. What's worse is that as the navigation occurs, any interactions we have done with the header are also going to get lost. For example, if you select some text within the header and we navigate to a different page, that whole text selection will go away. This is because of the full page reload. The whole header component is staring down

and then being rebuilt into the dorm from scratch. We can actually fix this quite easily by using the link component provided by next years. We can get this component from the next slash link module, and then any place we are using the native A component, we do a drop-in replacement with the link component. In addition to the homepage, we also make the same modification to the alpha and the beta pages. Now let's look at this modified application within the browser. The first time the application is rendered, we still see that the header is rendering because of course it has to render at least once.

But now as we navigate to the different pages within our application, we do not get any more log messages from the header. This is because the header is not being reloaded anymore because it is a part of the common layout and only the individual page sections that are different between alpha and beta, other portions that are getting rendered. And we can even prove that the dorm element for the header is preserved because if you make any text selection on it and navigate to the different pages, that text selection is being preserved. Even though we shouldn't use the anchor component directly underneath the next year's link component still renders

as a single anchor tag within the dom. As an example, within our homepage, we have to link components in that point to alpha and beta. And when we look at what they render within the dorm, you can see that they render simple anchor tags. So the link component supports all the props that you would normally pass to An anchor component. For example, we are already using hrif, but we can use other things as well. For example, we can set the target to be under blank to open the link in a new tab. And now when we look at the browser, you can see that it has rendered with that target prop set. And when we visit that link, you can see

that the browser opened up a new tab.