Next.js

Nested Anchor is invalid

<a href="/some/url">
  <a>
    This is invalid pattern
  </a>
</a>

발생 상황

1. RadixUI의 스타일과 Next/Link의 server side navigation이 모두 필요할 때

해결법

1. 스타일링 중심의 링크에서 링크 기능을 없앤다.

<RadixLink asChild>
  <NextLink href="/some/url">
    This is valid pattern
  </NextLink>
</RadixLink>

Server-side function in Client component

문제

서버 함수는 async인데 client component는 async가 될 수 없다.

해결법: refactor

1. client component는 최소화 후 분리
2. page는 ssr

자주 일으키는 오류

Error: Attempted to call createSlot() from the server but createSlot is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

1. client element를 별도의 파일에 refactor 한다.
2. "use client"