<p dir="auto">I'm trying to highlight the current item in my menu by checking the Router.pathname but I'm getting the error</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="No router instance found. You should only use &quot;next/router&quot; inside the client side of your app.
Error: No router instance found.
You should only use &quot;next/router&quot; inside the client side of your app."><pre class="notranslate"><span class="pl-v">No</span> <span class="pl-s1">router</span> <span class="pl-s1">instance</span> <span class="pl-s1">found</span><span class="pl-kos">.</span> <span class="pl-c1">You</span> <span class="pl-s1">should</span> <span class="pl-s1">only</span> <span class="pl-s1">use</span> <span class="pl-s">"next/router"</span> <span class="pl-s1">inside</span> <span class="pl-s1">the</span> <span class="pl-s1">client</span> <span class="pl-s1">side</span> <span class="pl-s1">of</span> <span class="pl-s1">your</span> <span class="pl-s1">app</span><span class="pl-kos">.</span>
<span class="pl-c1">Error</span>: <span class="pl-v">No</span> <span class="pl-s1">router</span> <span class="pl-s1">instance</span> <span class="pl-s1">found</span><span class="pl-kos">.</span>
<span class="pl-c1">You</span> <span class="pl-s1">should</span> <span class="pl-s1">only</span> <span class="pl-s1">use</span> <span class="pl-s">"next/router"</span> <span class="pl-s1">inside</span> <span class="pl-s1">the</span> <span class="pl-s1">client</span> <span class="pl-s1">side</span> <span class="pl-s1">of</span> <span class="pl-s1">your</span> <span class="pl-s1">app</span><span class="pl-kos">.</span></pre></div>
<p dir="auto">When I remove the code and add it after my page has loaded the code is working(with HMR). However, when I refresh the page it gives me that error.</p>
<p dir="auto">To reproduce:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Router from 'next/router'

export default () =&gt; (
  &lt;header&gt;
    {JSON.stringify(Router.pathname)}
  &lt;/header&gt;
)"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Router</span> <span class="pl-k">from</span> <span class="pl-s">'next/router'</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">header</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span><span class="pl-c1">JSON</span><span class="pl-kos">.</span><span class="pl-en">stringify</span><span class="pl-kos">(</span><span class="pl-v">Router</span><span class="pl-kos">.</span><span class="pl-c1">pathname</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">header</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span></pre></div>
<p dir="auto">Using next <code class="notranslate">2.1.1</code></p>
<p dir="auto">Similar to react-router's <code class="notranslate">Link</code>, it would be nice to be able to customize CSS when a link is active, e.g with an <code class="notranslate">activeClassName</code> property.</p>