Next.js Link to each other

Using <Link> when linking between pages

Next.js uses <Link> to wrap the <a> tag. The tag <Link> can let you navigate to the client-side page.

First, import the Link library on both the very top of index.js and first-post.js

import Link from 'next/link'

Second, Add the link “My First Post” into the tag <div className="grid"> in index.js. Type the following contents.

<Link href="/posts/first-post"><a className="card"><h3>First post!</h3></a></Link>

Finally, we add a Link into our first-post.js by following contents.

export default function FirstPost() {
    return(
     <>
      <h1>First Post</h1>
     <h2>
         <Link href="/">
           <a>Back to home</a>
         </Link>
       </h2>
     </>
    )
  }

Then we can see the link on the page

So, we can navigate between each other by <Link>