[NextJS] Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

 

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

- Next/Link의 children으로 component를 줬을때 생기는 error 입니다.

 

이 코드에서 error가 발생했을시 ,

 

1. component를 a tag로 감싸줍니다.

// 수정된 코드

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

 

2. a태그를 styledComponents로 감싸주면 a tag의 lint error가 사라집니다.

<Link href="/">
  <CustomLink>
     <Logo />
  </CustomLink>
</Link>
        
        
const CustomLink = styled.a``;  // styled-components 부분

 

3. 공식문서의 주의사항을 참고하여 passHref를 추가해줍니다.

<Link href="/" passHref>
  <CustomLink>
    <Logo />
  </CustomLink>
</Link>