title: Typical differences between routers and links in NextJS
body: <p>I am new to NextJS. I would like to know the typical variations and use cases between next/router and next/link.</p>
  <p>Which one should I use in various scenarios? Which does what? For instance, if I want to load shared components or navigate among pages which are server-side rendered.  Also what is the difference if I call a page with a normal 'a'  tag or use a link/router to achieve the same.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useRouter } from 'next/router'
  
  function ActiveLink({ children, href }) {
    const router = useRouter()
    const style = {
      marginRight: 10,
      color: router.pathname === href ? 'red' : 'black',
    }
  
    const handleClick = (e) =&gt; {
      e.preventDefault()
      router.push(href)
    }
  
    return (
      &lt;a href={href} onClick={handleClick} style={style}&gt;
        {children}
      &lt;/a&gt;
    )
  }
  
  export default ActiveLink</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Link from 'next/link'
  
  function Home() {
    return (
      &lt;ul&gt;
        &lt;li&gt;
          &lt;Link href="/"&gt;
            &lt;a&gt;Home&lt;/a&gt;
          &lt;/Link&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;Link href="/about"&gt;
            &lt;a&gt;About Us&lt;/a&gt;
          &lt;/Link&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    )
  }
  
  export default Home</code></pre>
  </div>
  </div>
  </p>