<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">I uploaded my Next.js/Express app on AWS and it's failing at runtime for unknown reason.</p>
<p dir="auto">I have the following AWS logs:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="START RequestId: 27f88393-2541-11e8-af21-a362290178d9 Version: $LATEST
2018-03-11 16:30:42.490 (+01:00)        27f88393-2541-11e8-af21-a362290178d9    req from http://staging.loan-advisor.studylink.fr/
END RequestId: 27f88393-2541-11e8-af21-a362290178d9
REPORT RequestId: 27f88393-2541-11e8-af21-a362290178d9  Duration: 600.55 ms     Billed Duration: 700 ms         Memory Size: 256 MB     Max Memory Used: 40 MB  

START RequestId: 293c9c47-2541-11e8-9e47-bb956db55617 Version: $LATEST
2018-03-11 16:30:43.008 (+01:00)        293c9c47-2541-11e8-9e47-bb956db55617    req from http://staging.loan-advisor.studylink.fr/_next/fa74e99a-3209-47d0-b35e-096852884958/page/_error.js
END RequestId: 293c9c47-2541-11e8-9e47-bb956db55617
REPORT RequestId: 293c9c47-2541-11e8-9e47-bb956db55617  Duration: 123.53 ms     Billed Duration: 200 ms         Memory Size: 256 MB     Max Memory Used: 40 MB  "><pre class="notranslate"><code class="notranslate">START RequestId: 27f88393-2541-11e8-af21-a362290178d9 Version: $LATEST
2018-03-11 16:30:42.490 (+01:00)        27f88393-2541-11e8-af21-a362290178d9    req from http://staging.loan-advisor.studylink.fr/
END RequestId: 27f88393-2541-11e8-af21-a362290178d9
REPORT RequestId: 27f88393-2541-11e8-af21-a362290178d9  Duration: 600.55 ms     Billed Duration: 700 ms         Memory Size: 256 MB     Max Memory Used: 40 MB  

START RequestId: 293c9c47-2541-11e8-9e47-bb956db55617 Version: $LATEST
2018-03-11 16:30:43.008 (+01:00)        293c9c47-2541-11e8-9e47-bb956db55617    req from http://staging.loan-advisor.studylink.fr/_next/fa74e99a-3209-47d0-b35e-096852884958/page/_error.js
END RequestId: 293c9c47-2541-11e8-9e47-bb956db55617
REPORT RequestId: 293c9c47-2541-11e8-9e47-bb956db55617  Duration: 123.53 ms     Billed Duration: 200 ms         Memory Size: 256 MB     Max Memory Used: 40 MB  
</code></pre></div>
<p dir="auto">What I could deduce from those logs is that a request is handled at <a href="http://staging.loan-advisor.studylink.fr/" rel="nofollow">http://staging.loan-advisor.studylink.fr/</a> by Express and then a new request from <a href="http://staging.loan-advisor.studylink.fr/_next/fa74e99a-3209-47d0-b35e-096852884958/page/_error.js" rel="nofollow">http://staging.loan-advisor.studylink.fr/_next/fa74e99a-3209-47d0-b35e-096852884958/page/_error.js</a> is handled.</p>
<p dir="auto">Next loads correctly IMHO, since it's able to load the <a href="http://staging.loan-advisor.studylink.fr/_next/fa74e99a-3209-47d0-b35e-096852884958/page/_error.js" rel="nofollow">http://staging.loan-advisor.studylink.fr/_next/fa74e99a-3209-47d0-b35e-096852884958/page/_error.js</a> script, which, I guess, displays a 404?</p>
<p dir="auto">So, something is wrong when Next.js app tries to display something initially, but I have nothing to help me debug the issue <g-emoji class="g-emoji" alias="confused" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f615.png">😕</g-emoji></p>
<p dir="auto">Locally, everything works correctly, but I'm concerned about the lack of logs in the AWS environment, which makes it super hard to debug anything.</p>
<p dir="auto">I did force <code class="notranslate">quiet: false</code> when instanciating my Next.js app but it doesn't have any effect.</p>
<hr>
<p dir="auto">Edit: I made a simple debug page at <a href="https://staging.loan-advisor.studylink.fr/debug" rel="nofollow">https://staging.loan-advisor.studylink.fr/debug</a> which works fine and gets rendered correctly, so my first assumption is right, an exception happens in the index page which leads to throwing a 404 somehow. (instead of a 500 :/)</p>
<h1 dir="auto">Feature request</h1>
<h2 dir="auto">Is your feature request related to a problem? Please describe.</h2>
<p dir="auto">I see a lot of people using a separate component, just for adding an active class when a route is active. My suggestion is the add functional support for className in the link component.</p>
<p dir="auto">To give an example:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import Link from &quot;./link&quot;;

// Example using classnames package.
import cx from &quot;classnames&quot;;

&lt;Link className={active =&gt; cx({ &quot;text-gray-200&quot;: active })} href=&quot;/&quot;&gt;
  &lt;a&gt;Home&lt;/a&gt;
&lt;/Link&gt;;

// Example using pure javascript.
&lt;Link className={active =&gt; active &amp;&amp; &quot;text-gray-200&quot;} href=&quot;/&quot;&gt;
  &lt;a&gt;Home&lt;/a&gt;
&lt;/Link&gt;;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">Link</span> <span class="pl-k">from</span> <span class="pl-s">"./link"</span><span class="pl-kos">;</span>

<span class="pl-c">// Example using classnames package.</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-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">active</span> <span class="pl-c1">=&gt;</span> <span class="pl-en">cx</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-s">"text-gray-200"</span>: <span class="pl-s1">active</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">}</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/"</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>Home<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-kos">;</span>

<span class="pl-c">// Example using pure javascript.</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">active</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">active</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s">"text-gray-200"</span><span class="pl-kos">}</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"/"</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>Home<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-kos">;</span></pre></div>
<h2 dir="auto">Describe the solution you'd like</h2>
<p dir="auto">My solution is to allow <code class="notranslate">className</code> to be both a string and a function; When then component identifies the <code class="notranslate">className</code> as a function, call the method with the first argument is a boolean if the route is active then true else false.</p>
<h2 dir="auto">Describe alternatives you've considered</h2>
<p dir="auto">An alternative solution is to implement the component yourself, as I have done so far.</p>
<p dir="auto">Another way would be creating a component with an <code class="notranslate">activeClassName</code> attribute but this prevents support for class IntelliSense in editors as VSCode.</p>
<p dir="auto">The reason I suggest this is because as the latest releases show, next.js is all about zero-config and not too much complexity. So why not implement such used feature into the existing Link component.</p>
<h2 dir="auto">Additional context</h2>
<p dir="auto">My current solution to this request is using a custom component.</p>
<p dir="auto">Made a gist to my component and a small example here: <a href="https://gist.github.com/ch99q/b417990540d2ef91870e1af99ac6a516">https://gist.github.com/ch99q/b417990540d2ef91870e1af99ac6a516</a></p>