title: NextJs Link component wrapping Image causes errors when mapping over array unless used in top level page component
body: <p>I am trying to utilise NextJs's <code>&lt;Link /&gt;</code> tag to wrap a NextJs <code>&lt;Image /&gt;</code> in my application, to map over an array of data. If I place a <code>&lt;Link /&gt;</code> in a top level page component everything plays nicely and renders correctly. However if I try to abstract this out into a sub component and then embed the sub component in the page component I receive errors telling me <code>Error: Multiple children were passed to &lt;Link&gt; with </code>href<code>of</code>/test<code> but only one child is supported https://nextjs.org/docs/messages/link-multiple-children</code> unless I remove all line breaks in the source code.</p>
  <p>For example this works</p>
  <pre class="lang-js prettyprint-override"><code>// pages/index.js
  import Link from 'next/link';
  import Image from 'next/image';
  
  export default function Home({links}) {
      return (
          &lt;&gt;
              &lt;div id=&quot;container&quot;&gt;
                  &lt;main&gt;
                      {links.map(link =&gt; {
                          return &lt;Link key={link.link} href={link.link}&gt;
                              &lt;a&gt;&lt;Image src={link.imageUrl} width={400} height={400}/&gt;&lt;/a&gt;
                          &lt;/Link&gt;;
                      })
                      }
                  &lt;/main&gt;
              &lt;/div&gt;
  
          &lt;/&gt;
      );
  }
  
  export async function getStaticProps() {
      const response = await fetch('http://localhost:3000/api/links');
      const links = await response.json();
      return {
          props: {
              links
          },
      }
  }
  
  </code></pre>
  <p>This also works</p>
  <pre class="lang-js prettyprint-override"><code>// pages/index.js
  import Links from '../components/Links';
  
  export default function Home({links}) {
      return (
          &lt;&gt;
              &lt;div id=&quot;container&quot;&gt;
                  &lt;main&gt;
                       &lt;Links links={links}/&gt;
                  &lt;/main&gt;
              &lt;/div&gt;
  
          &lt;/&gt;
      );
  }
  
  export async function getStaticProps() {
      const response = await fetch('http://localhost:3000/api/links');
      const links = await response.json();
      return {
          props: {
              links
          },
      }
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// components/Links.js
  import Image from 'next/image';
  import Link from 'next/link';
  
  export default function Links({links}) {
      return links.map(link =&gt; {
              return &lt;Link key={link.link} href={link.link}&gt;&lt;a&gt;&lt;Image src={link.imageUrl} width={400} height={400}/&gt;&lt;/a&gt;&lt;/Link&gt;;
          },
      );
  }
  </code></pre>
  <p>However this fails</p>
  <pre class="lang-js prettyprint-override"><code>// pages/index.js
  import Links from '../components/Links';
  
  export default function Home({links}) {
      return (
          &lt;&gt;
              &lt;div id=&quot;container&quot;&gt;
                  &lt;main&gt;
                       &lt;Links links={links}/&gt;
                  &lt;/main&gt;
              &lt;/div&gt;
  
          &lt;/&gt;
      );
  }
  
  export async function getStaticProps() {
      const response = await fetch('http://localhost:3000/api/links');
      const links = await response.json();
      return {
          props: {
              links
          },
      }
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// components/Links.js
  import Image from 'next/image';
  import Link from 'next/link';
  
  export default function Links({links}) {
      return links.map(link =&gt; {
              return &lt;Link key={link.link} href={link.link}&gt;
                  &lt;a&gt;
                      &lt;Image src={link.imageUrl} width={400} height={400}/&gt;
                  &lt;/a&gt;
              &lt;/Link&gt;;
          },
      );
  }
  </code></pre>
  <p>Any help appreciated!</p>