<p dir="auto">I have been having this issue since last night, i did some research but couldn't find any solution</p>
<p dir="auto">I'm not using Material ui or Styled components</p>
<p dir="auto"><strong>CustomLink</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { withRouter } from &quot;next/router&quot;;
import Link from &quot;next/link&quot;;
import React, { Children } from &quot;react&quot;;
import cx from &quot;classnames&quot;;

const ActiveLink = ({ router, children, ...props }) =&gt; {
  const child = Children.only(children);

  const className = cx(child.props.className, {
    [props.activeClassName]: router.asPath === props.as &amp;&amp; props.activeClassName
  });

  delete props.activeClassName;

  return &lt;Link {...props}&gt;{React.cloneElement(child, { className })}&lt;/Link&gt;;
};

export default withRouter(ActiveLink);"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">withRouter</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"next/router"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">Link</span> <span class="pl-k">from</span> <span class="pl-s">"next/link"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-v">React</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-v">Children</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">cx</span> <span class="pl-k">from</span> <span class="pl-s">"classnames"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">ActiveLink</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> router<span class="pl-kos">,</span> children<span class="pl-kos">,</span> ...<span class="pl-s1">props</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-k">const</span> <span class="pl-s1">child</span> <span class="pl-c1">=</span> <span class="pl-v">Children</span><span class="pl-kos">.</span><span class="pl-en">only</span><span class="pl-kos">(</span><span class="pl-s1">children</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-s1">className</span> <span class="pl-c1">=</span> <span class="pl-en">cx</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">.</span><span class="pl-c1">props</span><span class="pl-kos">.</span><span class="pl-c1">className</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-kos">[</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">activeClassName</span><span class="pl-kos">]</span>: <span class="pl-s1">router</span><span class="pl-kos">.</span><span class="pl-c1">asPath</span> <span class="pl-c1">===</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">as</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">activeClassName</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">delete</span> <span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">activeClassName</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-kos">{</span>...<span class="pl-s1">props</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">cloneElement</span><span class="pl-kos">(</span><span class="pl-s1">child</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> className <span class="pl-kos">}</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">Link</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">withRouter</span><span class="pl-kos">(</span><span class="pl-v">ActiveLink</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Nav.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
import &quot;../../static/styles/Nav.scss&quot;;

const Nav = () =&gt; {
  return (
    &lt;nav className=&quot;navbar&quot;&gt;
      &lt;Link
        href=&quot;/player?name=xXSARKURDZz&amp;platform=psn&quot;
        as=&quot;/player/psn/xXSARKURDZz&quot;
        activeClassName=&quot;navbar__item-active&quot;
      &gt;
        &lt;a className=&quot;navbar__item&quot;&gt;Profile&lt;/a&gt;
      &lt;/Link&gt;

      &lt;Link
        href=&quot;/gambit?name=xXSARKURDZz&amp;platform=psn&quot;
        as=&quot;/player/psn/xXSARKURDZz/gambit&quot;
        activeClassName=&quot;navbar__item-active&quot;
      &gt;
        &lt;a className=&quot;navbar__item&quot;&gt;Gambit&lt;/a&gt;
      &lt;/Link&gt;
    
    &lt;/nav&gt;
  );
};

export default Nav;
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-s">"../../static/styles/Nav.scss"</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-v">Nav</span> <span class="pl-c1">=</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-k">return</span> <span class="pl-kos">(</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">nav</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"navbar"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Link</span>
        <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/player?name=xXSARKURDZz&amp;platform=psn"</span>
        <span class="pl-c1">as</span><span class="pl-c1">=</span><span class="pl-s">"/player/psn/xXSARKURDZz"</span>
        <span class="pl-c1">activeClassName</span><span class="pl-c1">=</span><span class="pl-s">"navbar__item-active"</span>
      <span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"navbar__item"</span><span class="pl-c1">&gt;</span>Profile<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Link</span><span class="pl-c1">&gt;</span>

      <span class="pl-c1">&lt;</span><span class="pl-ent">Link</span>
        <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/gambit?name=xXSARKURDZz&amp;platform=psn"</span>
        <span class="pl-c1">as</span><span class="pl-c1">=</span><span class="pl-s">"/player/psn/xXSARKURDZz/gambit"</span>
        <span class="pl-c1">activeClassName</span><span class="pl-c1">=</span><span class="pl-s">"navbar__item-active"</span>
      <span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"navbar__item"</span><span class="pl-c1">&gt;</span>Gambit<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Link</span><span class="pl-c1">&gt;</span>
    
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">nav</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">Nav</span><span class="pl-kos">;</span></pre></div>
<h1 dir="auto">Examples bug report</h1>
<h2 dir="auto">Example name</h2>
<p dir="auto"><a href="https://github.com/zeit/next.js/tree/canary/examples/with-styled-components">with-styled-components</a></p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Also posted here: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="242255124" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/2538" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/2538/hovercard" href="https://github.com/vercel/next.js/issues/2538">#2538</a></p>
<p dir="auto">Using <code class="notranslate">css</code> prop introduced with styled-components v4 causes <code class="notranslate">Warning: Prop className did not match.</code>.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Add any HTML element with <code class="notranslate">css</code> prop.</p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">Correctly styled rendering on the server side without any warnings.</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/698079/57632876-37f26280-75ab-11e9-91a2-a270d92f122d.png"><img src="https://user-images.githubusercontent.com/698079/57632876-37f26280-75ab-11e9-91a2-a270d92f122d.png" alt="57497472-7b657c00-72e0-11e9-84c5-e7e5fa0d351c" style="max-width: 100%;"></a></p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: Windows</li>
<li>Chrome</li>
<li>Version of Next.js: 8.1.0</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Here is an example I created to demonstrate the issue: <a href="https://codesandbox.io/embed/jlwvwyy0ow" rel="nofollow">https://codesandbox.io/embed/jlwvwyy0ow</a></p>
<p dir="auto">Open this and refresh once the building is done: <a href="https://jlwvwyy0ow.sse.codesandbox.io/" rel="nofollow">https://jlwvwyy0ow.sse.codesandbox.io/</a></p>