Nextjs is link not working in single line

import Link from 'next/link';

const Index =  () => {
    return (
        <div>
            <ul>
                <li>
                    <Link href="/">  <a>Home</a>  </Link>
                </li>
            </ul>
            <h1>Hellow Next.js</h1>
        </div>
    )
}
export default Index;

First i declared <a> </a> tag in one line into <Link></Link> but its through me Error

React.Children.only expected to receive a single React element child.

After i added a line break like this

<Link href="/">  
     <a>Home</a>  
</Link>

it works fine. whats the problem?

Thanks 😃

[timneutkens]

I don’t think we can make changes here, also the issue doesn’t follow / ignores the issue template.

[kachkaev]

Yes, the space is the thing to blame here. It’s not to do with Next.js and is related to how jsx (React markup) is transpiled to normal JS. https://stackoverflow.com/a/32690647