[Next.js] router, Link, a - page 이동 방법

<a> tag

보다시피 브라우저가 다른 페이지로 보내기 위해 전체 페이지를 새로고침 하게된다. 이렇게 되면 페이지가 느려지고, SPA의 장점을 이용하지 못하게 된다.

 

그럼 해결방안은?

Link

Link태그를 사용해야한다.

Link태그는 next.js에서 next/link 안에 들어있는 기능이다. <Link href='/pages'> 를 넣어주면 된다.

이처럼 새로고침이 안일어나고 페이지 이동이 되는것을 볼 수있다.

useRouter hook

그럼 a태그는 어디에 사용하는 것일까? Link태그 말고도 next.js의 useRouter를 이용하여 페이지를 이동 시킬 수 있다. 하지만 아래에서는 next.js에서 a태그를 사용하는 것을 보여주겠다. a태그는 link를 연결하는 것이 아닌 Link 태그에서 적용 시킬 수 없는 style이나 className같은 속성을 추가하는데 사용한다.

router.pathname : 현재 router 위치 등 router안에는 많은 내용이 담겨있기 때문에 이를 잘 사용해서 코딩을 할 수 있다.

Page 이동이 될 때 마다 현재 페이지에서는 색상이 red로 변경되는 것을 볼 수 있다.