In the last lecture, we saw how we create multiple pages just by creating files in Next Js which is also called the file based routing method and that is what we discussed even in the first few lectures. Moreover, we gave structure to our website, although we haven't linked those pages yet. Remember that navigation of pages in React Js can sometimes be a real pain? Well, not any more now that Next Js is here. This is where the Link component comes in. So today, we&rsquo;ll see how the Link component works. And not only that, we will also see how this Link component is different from the good old anchor tag of HTML which can still be used to link different websites.
First of all, run the development server if it&rsquo;s not already running. Once the server starts running, you can see our website and everything we have done so far. Also, we have created all the required pages for our website. Despite this, the biggest problem with the website is that these pages are still not navigable. And we cannot simply use anchor tags to achieve that here. We will rather use the Link Component.
&nbsp;
<h2>Link Component</h2>
When you use anchor tags to link your website pages, clicking the website reloads the page, whereas using Link for the same purpose avoids the triggering of the page refresh. And this is because there is no href but JavaScript is populating the content of the linked page. So basically, that&rsquo;s the beauty of the Link component of Next Js. It prevents the web page from reloading each time you click a navigation link.
Link is a component which can be easily imported from next/link using the command given below.
<pre class="language-javascript"><code>import Link from 'next/link'</code></pre>
&nbsp;
Now, since we want the contents of our navigation bar to handle links to different pages, we would nest the list items into the Next Js Link component. Link component has an only required attribute named href which holds the relative link to the page you want to navigate from this Link. We have placed these list items inside an anchor tag to make them appear as links. This is how the updated code looks like.
<pre class="language-markup"><code>&lt;ul&gt;
 &lt;Link href='/'&gt;&lt;a&gt;&lt;li&gt;Home&lt;/li&gt;&lt;/a&gt;&lt;/Link&gt;
 &lt;Link href='/about'&gt;&lt;a&gt;&lt;li&gt;About&lt;/li&gt;&lt;/a&gt;&lt;/Link&gt;
 &lt;Link href='/blog'&gt;&lt;a&gt;&lt;li&gt;Blog&lt;/li&gt;&lt;/a&gt;&lt;/Link&gt;
 &lt;Link href='/contact'&gt;&lt;a&gt;&lt;li&gt;Contact&lt;/li&gt;&lt;/a&gt;&lt;/Link&gt;
 &lt;/ul&gt;
</code></pre>
&nbsp;
And as you can observe, we can now navigate to different pages through these links.&nbsp;
The Link component also has other useful and complex attributes, such as scroll, which lets us decide whether to scroll the page all the way to the top or not while navigating. More information about the Link component can be found on its official Next Js documentation page. We&rsquo;ll utilise more of this in the coming tutorials. Hope to see you all there. Till then, keep coding and learning!
&nbsp;

Introduction to Next.js | NextJs Tutorial for Beginners #1

Our first Next.js website | NextJs Tutorial for Beginners #2

File Based Routing in Next.js | NextJs Tutorial for Beginners #3

JavaScript and React Refresher for Next.js | NextJs Tutorial for Beginners #4

Link component in Next.js - Understanding next/link | NextJs Tutorial for Beginners #9