Pages Router: Link Component | Next.js

7Chapter 7Link ComponentWhen linking between pages on websites, you use the <a> HTML tag. In Next.js, you can use the Link Component next/link to link between pages in your application. <Link> allows you to do client-side navigation and accepts props that give you better control over the navigation behavior. Using <Link> First, open pages/index.js, and import the Link component from next/link by adding this line at the top: import Link from 'next/link'; Then find the h1 tag that looks like this: <h1 className={styles.title}> Learn <a href="https://nextjs.org">Next.js!</a> </h1> And change it to: <h1 className={styles.title}> Read <Link href="/posts/first-post">this page!</Link> </h1> Next, open pages/posts/first-post.js and replace its content with the following: import Link from 'next/link'; export default function FirstPost() { return ( <> <h1>First Post</h1> <h2> <Link href="/">Back to home</Link> </h2> </> ); } As you can see, the Link component is similar to using <a> tags, but instead of <a href="…">, you use <Link href="…">. Note: Before Next.js 12.2, it was required that the Link component wrapped an <a> tag, but this is not required in versions 12.2 and above. Let’s check to see if it works. You should now have a link on each page, allowing you to go back and forth: 7You've Completed Chapter 7Next Up8: Client-Side NavigationStart Chapter 8Was this helpful?Start Chapter 8Sign inSign in to save progress