title: How can I get the activeClass to work with static pages after a Next.js export?
body: <p>I'm creating a small website with next.js in order to deploy on Github as a static HTML website. I'm having some problems with the classic "active" navbar classes. Is there any way to get Next to export the appropriate active classes when compiling the static pages?</p>
  
  <p>I have a navbar component which is added to a layout component and used on both pages:</p>
  
  <pre><code>const Navbar = () =&gt; (
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;Link activeClassName="active" href="/"&gt;&lt;a&gt;About Me&lt;/a&gt;&lt;/Link&gt;&lt;/li&gt;
              &lt;li&gt;&lt;Link activeClassName="active" href="/skills"&gt;&lt;a&gt;Skills&lt;/a&gt;&lt;/Link&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  );
  
  export default Navbar;
  </code></pre>
  
  <p>And I have this link component which applies the active class when the application is deployed locally: </p>
  
  <pre><code>import { withRouter } from 'next/router'
  import Link from 'next/link'
  import React, { Children } from 'react'
  
  const ActiveLink = ({ router, children, ...props }) =&gt; {
      const child = Children.only(children);
  
      let className = child.props.className || null;
  
      if (router.pathname === props.href &amp;&amp; props.activeClassName) {
          className = `${className !== null ? className : ''} ${props.activeClassName}`.trim();
      }
  
      delete props.activeClassName;
  
      return &lt;Link {...props}&gt;{React.cloneElement(child, { className })}&lt;/Link&gt;
  }
  
  export default withRouter(ActiveLink);
  </code></pre>
  
  <p>This code works perfectly while I'm running it locally as a react app, but if I export to /out as static HTML the active classes no longer get applied. I'm not quite sure how to fix this and I've been looking everywhere. I keep finding conflicting answers and nothing seems to work. I can post more of my code if necessary.</p>