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

Next JS로 코드를 작성하다 보면 갑자기 아래와 같은 에러가 발생할 수도 있다.

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

이 문제가 발생하는 이유는 HTML에서 유효하지 않은 중첩이 발생했을 때 발생한다. 이 경우, a 태그가 a 태그 내부에 중첩되어 있다는 뜻이다. 이전에는 Link를 사용했을 때, a 태그를 같이 사용해서 구현했었다. 즉, a 태그 역할을 Link 안에 또 다른 a 태그를 사용했기 때문에 발생한 것이다.

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

or

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

그러나 이제는 위 처럼 코드를 작성하지 않는다. 왜냐하면, 이제는 a 태그를 사용하지 않고 Link로만 처리하기 때문이다.

 

그렇기 때문에 아래와 같이 수정해서 처리하면 더 이상 에러가 발생하지 않는다.

<Link href="...">
	...
</Link>

or

<Link href="...">
	<div>...</div>
</Link>

 

Styled-components로 구현했을 때도 마찬가지다.

const LinkStyle = styled.div`
	...
`

<Link href="...">
	<LinkStyle>...</LinkStyle>
</Link>

styled.a가 아닌 styled.div로 처리하면 된다.