개발일기.2022.2.9 개발일기 next/link

next/link 에러 발생

pages/main.js  

<a className="" href="/news?" target="_blank" rel="noreferrer">
    <span className="">더보기</span> {`>`}
</a>

Failed to compile.

./pages/main.js
12:21  Error: Do not use the HTML  tag to navigate to /news/. Use Link from 'next/link' instead. See: https://nextjs.org/docs/messages/no-html-link-for-pages.  @next/next/no-html-link-for-pages

 

nextjs에서는 server단에서 a 태그를 막아놨다. 그래서 next/link 사용을 권고한다. 

수정한 코드

 <Link href="/news">
   <a>
      <span className="pr-3">더보기</span> {`>`}
   </a>
</Link>

나는 새 창에서 열고 싶어서 next/link 를 열심히 찾아봤다.

next/link | Next.js

Link tag에 href 속성을 사용한 만큼 다른 속성들도 써야하는 줄 알았다. 

하지만 Link tag에서 제공하는 target 속성은 없었다.

 

결론은 Link tag 안에 있는 a tag에 넣어주면 정상작동을 하는 걸 알 수 있다.

 <Link href="/news">
   <a target="_blank" rel="noreferrer">
      <span className="pr-3">더보기</span> {`>`}
   </a>
</Link>