You need <a> tag inside the Next.js Link Component if the child is not a string. The <a> tag is automatically added if the child is a string

so your code should look like this:

<li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
    <Link href={'/index'} itemProp="item">
      <a>
       <span itemProp="name">
         home
       </span>
      </a>
    </Link>
<meta itemProp="position" content="1"/>
</li>

Explanation of why we need a <a> is here: https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx

SEO best practice is to use an anchor tag whenever you have a link. As you deduced correctly, Link is just a wrapper component and it does some magic using JS. So you can technically create a link with span too.

passHref forces href to be passed to the immediate child. If you use the passHref property like below, the href tag will be added to the span. :

<Link href={'/index'} itemProp="item" passHref>
       <span itemProp="name">
         home
       </span>
    </Link>

But this is not good for your SEO. That is why Nextjs docs suggest using an anchor tag.

Now you can wrap a inside span and vice-versa. Both are perfectly valid, but you would want your href to be on your anchor tag. And for that you should be using the below code as suggested in another solution:

<Link href={'/index'} itemProp="item">
       <a>
       <span itemProp="name">
         home
       </span>
       </a>
</Link>