Next.js | Link, query params

Link 태그

Next.js 의 Link 태그는 a 태그로 변환된다
그렇다고 a 태그를 사용하는 것은 좋지 않다
a 태그로 링크 이동을 하게되면 layout 등 해당 페이지 전체에 대한 리소스를 새로 요청하게 된다
Link 태그로 이동하면 해당 페이지만 요청이 들어가게 된다
이미 접근했던 경로라면 캐싱되어있는 정보로 바로 보여준다

query params

Link 태그에 query param 을 등록하면 해당 링크에서 useSearchParams() 로 받을 수 있다

검색 엔진은 버튼이나 입력을 보지 않고 a 태그와 속성을 찾기 때문에
링크 이동의 경우 되도록 Link 를 사용하는 편이 좋겠다

const pathname = usePathname();

<Link
  href={{ pathname: item.path, query: { prevPath: pathname } }}
  as={item.path}
  className="flex items-center gap-4"
 >링크 이동 시 query param 전달</Link>

const prevPath = useSearchParams().get("prevPath") || "/admin";

받는 쪽에서 사용
위 코드는 링크를 클릭한 곳의 pathname 을 전달중..