next.js 에서 `<Link />`, `<a />` `router.push()` 를 사용할 때 차이점이 궁금합니다.

음 일단 페이지내에서 눌렀을때면 Link태그를 사용하시면 되지만 특정동작 후 어떤 페이지로 가라를 해야한다면 router를 사용해주셔야 합니다.

해당 글을 참고해보시면 좋을 것 같네요! https://imagineu.tistory.com/83

Next.js에서 페이지 이동을 구현하는 방법에는 <Link />, <a /> 태그, 그리고 router.push()가 있습니다. 각각의 방법은 특정 상황에 유용하며, 장단점이 있습니다. 1. ' <Link /> ': - Next.js에서 제공하는 컴포넌트로, 클라이언트 사이드에서 페이지 이동을 가능하게 합니다. - 장점: 클라이언트 사이드 네비게이션을 사용하여 빠른 페이지 이동이 가능합니다. 이는 브라우저의 새로 고침 없이 페이지를 렌더링하여 사용자 경험을 향상시킵니다. - 단점: <Link /> 컴포넌트는 내부 페이지 이동에만 사용할 수 있습니다. 외부 링크에는 사용할 수 없습니다. 2. ' <a /> ' 태그: - 기본 HTML 태그로, 페이지 이동이나 외부 링크에 사용됩니다. - 장점: 기본적인 웹 브라우저 기능을 사용하므로 어떠한 상황에서도 동작합니다. 외부 링크로 이동할 때 사용할 수 있습니다. - 단점: 클라이언트 사이드 네비게이션을 사용하지 않아 페이지 로딩이 느릴 수 있습니다. 3. ' router.push() ': - Next.js에서 제공하는 라우터 객체의 메서드로, 프로그래밍 방식으로 페이지 이동을 구현할 수 있습니다. - 장점: 동적으로 페이지 이동을 구현할 수 있으며, 클라이언트 사이드 네비게이션을 사용하여 빠른 페이지 이동이 가능합니다. - 단점: 함수를 호출하는 방식으로 사용해야 하므로, 복잡한 로직을 구현할 때만 사용하는 것이 좋습니다. 따라서, 대부분의 경우 ' <Link /> '를 사용하여 페이지 이동을 구현하는 것이 좋습니다. 하지만 외부 링크로 이동하거나 복잡한 로직이 필요한 경우에는 ' <a /> ' 태그나 ' router.push() '를 사용하는 것이 적절합니다. 상황에 따라 적절한 방법을 선택하여 사용하시면 됩니다.