next.js에서 클릭 시 특정 영역으로 자동 스크롤 이동

html처럼 a태그에 id를 부여하여 해당 섹션으로 이동하는 기능이 필요했다. 

나는 사이드바를 구현하였기 때문에 메뉴를 누르면 해당 영역으로 이동했어야 했다. 

 

next.js에서는 Link태그에 a태그가 내장되어있으므로 Link href 경로에 id를 넣어줬더니 잘 기능 하였다.

 

(예시)

SideBar.tsx (Link를 사용할 컴포넌트)

 

Business. tsx (화면에 나타날 컴포넌트)

따라서 메뉴를 누르면 해당 컴포넌트의 섹션으로 자동 스크롤 된다