title: External link is not working in Next.js when you want to use Link component
body: <p>I was very surprised that a simple <code>Link</code> component is not working in <a href="https://nextjs.org/" rel="noreferrer">Next.js</a> when you want to use an external URL and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button" rel="noreferrer">HTML Button tag</a> inside it.</p>
  
  <p>Below you can see how I tried to solve the problem:</p>
  
  <p><strong>Approach number 1</strong>:</p>
  
  <pre><code>&lt;Link href="https://stackoverflow.com/"&gt;
    &lt;button&gt;StackOverflow&lt;/button&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p><strong>Approach number 2</strong> (link without protocol):</p>
  
  <pre><code>&lt;Link href="//stackoverflow.com/"&gt;
    &lt;button&gt;StackOverflow&lt;/button&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p><strong>Approach number 3</strong> (link without protocol and with Link attribute <code>prefetch</code> set to <code>false</code> or even <code>true</code>):</p>
  
  <pre><code>&lt;Link href="//stackoverflow.com/" prefetch={false}&gt;
    &lt;button&gt;StackOverflow&lt;/button&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p><strong>IMPORTANT NOTE</strong></p>
  
  <p>Of course, mentioned case it's working when the URL is internal, like that:</p>
  
  <pre><code>&lt;Link href="/stackoverflow"&gt;
    &lt;button&gt;StackOverflow&lt;/button&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p>or when I will change HTML button tag into <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" rel="noreferrer">HTML A tag</a>, like that:</p>
  
  <pre><code>&lt;Link href="//stackoverflow.com/"&gt;
    &lt;a&gt;StackOverflow&lt;/a&gt;
  &lt;/Link&gt;
  </code></pre>
  
  <p>In my case, I want to use the HTML button tag or any other UI component inside the Next.js Link component.</p>