Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. .....


This warning happens when you have used <Link> tag in your next js app. 


<li className='list-none mb-2' >
<Link className='p-3 rounded hover:bg-[#f2f2f2] block btn-more' href="#"
onClick={toggleMoreMenu}

> <a className='flex items-center'>
<Image
className="relative"
src="icons/three-bars.svg"
alt="More"
width="0"
height="0"
style={{ width: '25px', height: 'auto' }}
priority
/><span className='pl-5 sm:hidden lg:block'>More</span></a>
</Link>
</li>

In the above you can see we have <a> tag inside <Link> tag, it creates nested <a> in the front end.


you can see the nested <a> tag, that's why it shows a warning, to remove the warning we need to remove the <a> tag inside <Link> tag.

Solution
<li className='list-none mb-2' >
<Link className='p-3 rounded hover:bg-[#f2f2f2] block btn-more' href="#"
onClick={toggleMoreMenu}
>
<Image
className="relative"
src="icons/three-bars.svg"
alt="More"
width="0"
height="0"
style={{ width: '25px', height: 'auto' }}
priority
/><span className='pl-5 sm:hidden lg:block'>More</span>
</Link>
</li>