<p dir="auto">In my static folder I have the following symlink:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="semantic.min.css -&gt; ../node_modules/semantic-ui-css/semantic.min.css"><pre class="notranslate"><code class="notranslate">semantic.min.css -&gt; ../node_modules/semantic-ui-css/semantic.min.css
</code></pre></div>
<p dir="auto">When I do a <code class="notranslate">next export</code> it copies the symlink into the <code class="notranslate">out/static</code> folder. It would make more sense for it to read the contents of the file that is symlinked to and place that into the <code class="notranslate">out/static</code> folder.</p>
<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">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Read the contents of the file pointed to by the symlink and place that into the <code class="notranslate">out/static</code> folder.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Symlink is copied.</p>
<h2 dir="auto">Context</h2>
<p dir="auto">I'm symlinking a file in my node_modules directory into my static directory so whatever version is installed by npm is immediately accessible and so that I don't have to commit that 3rd party modules file into git. Now I'm having to manually replace the symlink in the out folder after each export.</p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.1.3</td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">When using <code class="notranslate">Link</code> (next/Link) with a functional component (button), it stops working.</p>
<p dir="auto">Basically, the link is <strong>ignored</strong>. The button's click is properly triggered, but there is <strong>no redirection</strong> happening.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">I had the following (working) source code:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;
            &lt;Link // TODO sentry warning if &lt; 2k chars https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers
              href={`/solutions?${QUERY_SIMULATION_KEY}=${encodeQueryParameter(serializeStudentSolutionContext(studentSolutionContext))}`}
            &gt;
              &lt;Button
                className=&quot;btn-border&quot;
                onClick={(): void =&gt; {
                  setIsLoadingSolutionsPage(true);
                }}
              &gt;
                {t('chatbotPage.solutionsFound.button', 'Voir les solutions')}
                {
                  isLoadingSolutionsPage ? (
                    &lt;&gt;
                      {' '}&lt;AnimatedBubble /&gt;
                    &lt;/&gt;
                  ) : null
                }
              &lt;/Button&gt;
            &lt;/Link&gt;
          &lt;/div&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-smi">Link</span> <span class="pl-c">// TODO sentry warning if &lt; 2k chars https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers</span>
              <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s">`/solutions?<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-smi">QUERY_SIMULATION_KEY</span><span class="pl-kos">}</span></span>=<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-en">encodeQueryParameter</span><span class="pl-kos">(</span><span class="pl-en">serializeStudentSolutionContext</span><span class="pl-kos">(</span><span class="pl-s1">studentSolutionContext</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">}</span>
            <span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-smi">Button</span>
                <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"btn-border"</span>
                <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                  <span class="pl-en">setIsLoadingSolutionsPage</span><span class="pl-kos">(</span><span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</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-en">t</span><span class="pl-kos">(</span><span class="pl-s">'chatbotPage.solutionsFound.button'</span><span class="pl-kos">,</span> <span class="pl-s">'Voir les solutions'</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
                <span class="pl-kos">{</span>
                  <span class="pl-s1">isLoadingSolutionsPage</span> ? <span class="pl-kos">(</span>
                    <span class="pl-c1">&lt;</span><span class="pl-c1">&gt;</span>
                      <span class="pl-kos">{</span><span class="pl-s">' '</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-smi">AnimatedBubble</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                  <span class="pl-kos">)</span> : <span class="pl-c1">null</span>
                <span class="pl-kos">}</span>
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Button</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Link</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">Which I changed into the following (non-working) code:</p>
<div class="highlight highlight-source-tsx notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
  const solutionsPageLink = `/solutions?${QUERY_SIMULATION_KEY}=${encodeQueryParameter(serializeStudentSolutionContext(studentSolutionContext))}`; // TODO sentry warning if &lt; 2k chars https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers

  const SolutionsPageButton = (): JSX.Element =&gt; {
    return (
      &lt;Button
        className=&quot;btn-border&quot;
        onClick={(): void =&gt; {
          // Stores the selected persona in the browser localStorage
          patchUserData({ persona: studentSolutionContext.persona });

          // Starts button's animation
          setIsLoadingSolutionsPage(true);
        }}
      &gt;
        {t('chatbotPage.solutionsFound.button', 'Voir les solutions')}
        {
          isLoadingSolutionsPage ? (
            &lt;&gt;
              {' '}&lt;AnimatedBubble /&gt;
            &lt;/&gt;
          ) : null
        }
      &lt;/Button&gt;
    );
  };

// ...

&lt;div&gt;
            {
              // XXX When displayed within an iframe, then open the link in a new page
              //  The point is to avoid displaying too much on the institutional website,
              //  but rather redirect the user to our platform so that they may benefit from all our services
              isInIframe ? (
                &lt;a
                  href={solutionsPageLink}
                  target={'_blank'} // Open in a new tab while keeping the current tab open
                &gt;
                  &lt;SolutionsPageButton /&gt;
                &lt;/a&gt;
              ) : (
                &lt;Link
                  href={solutionsPageLink}
                &gt;
                  &lt;SolutionsPageButton /&gt;
                &lt;/Link&gt;
              )
            }
          &lt;/div&gt;"><pre class="notranslate">  <span class="pl-k">const</span> <span class="pl-s1">solutionsPageLink</span> <span class="pl-c1">=</span> <span class="pl-s">`/solutions?<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-smi">QUERY_SIMULATION_KEY</span><span class="pl-kos">}</span></span>=<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-en">encodeQueryParameter</span><span class="pl-kos">(</span><span class="pl-en">serializeStudentSolutionContext</span><span class="pl-kos">(</span><span class="pl-s1">studentSolutionContext</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span> <span class="pl-c">// TODO sentry warning if &lt; 2k chars https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers</span>

  <span class="pl-k">const</span> <span class="pl-smi">SolutionsPageButton</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi">JSX</span><span class="pl-kos">.</span><span class="pl-smi">Element</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-smi">Button</span>
        <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"btn-border"</span>
        <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span>: <span class="pl-smi"><span class="pl-k">void</span></span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
          <span class="pl-c">// Stores the selected persona in the browser localStorage</span>
          <span class="pl-en">patchUserData</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">persona</span>: <span class="pl-s1">studentSolutionContext</span><span class="pl-kos">.</span><span class="pl-c1">persona</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

          <span class="pl-c">// Starts button's animation</span>
          <span class="pl-en">setIsLoadingSolutionsPage</span><span class="pl-kos">(</span><span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</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-en">t</span><span class="pl-kos">(</span><span class="pl-s">'chatbotPage.solutionsFound.button'</span><span class="pl-kos">,</span> <span class="pl-s">'Voir les solutions'</span><span class="pl-kos">)</span><span class="pl-kos">}</span>
        <span class="pl-kos">{</span>
          <span class="pl-s1">isLoadingSolutionsPage</span> ? <span class="pl-kos">(</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">&gt;</span>
              <span class="pl-kos">{</span><span class="pl-s">' '</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-smi">AnimatedBubble</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
          <span class="pl-kos">)</span> : <span class="pl-c1">null</span>
        <span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Button</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-c">// ...</span>

<span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
            <span class="pl-kos">{</span>
              <span class="pl-c">// XXX When displayed within an iframe, then open the link in a new page</span>
              <span class="pl-c">//  The point is to avoid displaying too much on the institutional website,</span>
              <span class="pl-c">//  but rather redirect the user to our platform so that they may benefit from all our services</span>
              <span class="pl-s1">isInIframe</span> ? <span class="pl-kos">(</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">a</span>
                  <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">solutionsPageLink</span><span class="pl-kos">}</span>
                  <span class="pl-c1">target</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s">'_blank'</span><span class="pl-kos">}</span> <span class="pl-c">// Open in a new tab while keeping the current tab open</span>
                <span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-smi">SolutionsPageButton</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                <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-kos">)</span> : <span class="pl-kos">(</span>
                <span class="pl-c1">&lt;</span><span class="pl-smi">Link</span>
                  <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">solutionsPageLink</span><span class="pl-kos">}</span>
                <span class="pl-c1">&gt;</span>
                  <span class="pl-c1">&lt;</span><span class="pl-smi">SolutionsPageButton</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Link</span><span class="pl-c1">&gt;</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">div</span><span class="pl-c1">&gt;</span></pre></div>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The <code class="notranslate">Link</code> component should redirect in both cases.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: [e.g. macOS, Windows] Mac</li>
<li>Browser (if applies) [e.g. chrome, safari] Chrome</li>
<li>Version of Next.js: [e.g. 6.0.2] 9.1</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="467232050" data-permission-text="Title is private" data-url="https://github.com/vercel/next.js/issues/7915" data-hovercard-type="issue" data-hovercard-url="/vercel/next.js/issues/7915/hovercard" href="https://github.com/vercel/next.js/issues/7915">#7915</a>, couldn't find a solution even though I read <a href="https://nextjs.org/docs/api-reference/next/link" rel="nofollow">https://nextjs.org/docs/api-reference/next/link</a>, but there is not example when using a <code class="notranslate">&lt;Button&gt;</code>.</p>
<p dir="auto">My easiest workaround would be not using a functional component, and thus duplicate my button's code.</p>
<p dir="auto">Alternatively, if the <code class="notranslate">Link</code> component could behave link a <code class="notranslate">&lt;a&gt;</code> (through prop configuration), I wouldn't have to perform such ternary condition, and could just provide such prop dynamically (no duplicated code, no functional component)</p>