NextJs Link component wrapping Image causes errors when mapping over array unless used in top level page component

Question

I am trying to utilise NextJs's <Link /> tag to wrap a NextJs <Image /> in my application, to map over an array of data. If I place a <Link /> 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 Error: Multiple children were passed to <Link> with hrefof/test but only one child is supported https://nextjs.org/docs/messages/link-multiple-children unless I remove all line breaks in the source code.

For example this works

// pages/index.js
import Link from 'next/link';
import Image from 'next/image';

export default function Home({links}) {
    return (
        <>
            <div id="container">
                <main>
                    {links.map(link => {
                        return <Link key={link.link} href={link.link}>
                            <a><Image src={link.imageUrl} width={400} height={400}/></a>
                        </Link>;
                    })
                    }
                </main>
            </div>

        </>
    );
}

export async function getStaticProps() {
    const response = await fetch('http://localhost:3000/api/links');
    const links = await response.json();
    return {
        props: {
            links
        },
    }
}

This also works

// pages/index.js
import Links from '../components/Links';

export default function Home({links}) {
    return (
        <>
            <div id="container">
                <main>
                     <Links links={links}/>
                </main>
            </div>

        </>
    );
}

export async function getStaticProps() {
    const response = await fetch('http://localhost:3000/api/links');
    const links = await response.json();
    return {
        props: {
            links
        },
    }
}

// components/Links.js
import Image from 'next/image';
import Link from 'next/link';

export default function Links({links}) {
    return links.map(link => {
            return <Link key={link.link} href={link.link}><a><Image src={link.imageUrl} width={400} height={400}/></a></Link>;
        },
    );
}

However this fails

// pages/index.js
import Links from '../components/Links';

export default function Home({links}) {
    return (
        <>
            <div id="container">
                <main>
                     <Links links={links}/>
                </main>
            </div>

        </>
    );
}

export async function getStaticProps() {
    const response = await fetch('http://localhost:3000/api/links');
    const links = await response.json();
    return {
        props: {
            links
        },
    }
}

// components/Links.js
import Image from 'next/image';
import Link from 'next/link';

export default function Links({links}) {
    return links.map(link => {
            return <Link key={link.link} href={link.link}>
                <a>
                    <Image src={link.imageUrl} width={400} height={400}/>
                </a>
            </Link>;
        },
    );
}

Any help appreciated!

Answer 1

try the code bellow

const CustomLink = React.forwardRef(({ href, children, ...rest }, ref) => (
  <a href={href} ref={ref} {...rest}>
    {children}
  </a>
));

// components/Links.js
import Image from 'next/image';
import Link from 'next/link';

export default function Links({links}) {
   return links.map(link => {
            return <Link key={link.link} passHref href={link.link}>
                <Image src={link.imageUrl} width={400} height={400}/>
            </Link>;
       },
   );
}

Answer 2

I believe you need to wrap the image in an anchor tag

 <Link href="/">
      <a>
          <Image
            src="/logo.svg"
            alt="logo"
            width="97"
            height="40"
            css={s.logo}
          />
    </a>
  </Link>