Next.js 페이지 이동 Link, Router

안녕하세요!

이전 글에서 다이나믹 라우팅에 대해 살펴보았는데요.

오늘은 넥스트에서 페이지 전환할 때 사용하는 방법인 Link, Router에 대하여 알아보겠습니다.

 

페이지를 이동할 때 a태그를 사용한다면 전체 새로고침이 되며 다시 정보들을 새롭게 가져오게 됩니다.

이는 흰 화면이 보일 수도 있고 매번 통신을 새롭게 하다 보니 사용자 경험 측면에서도 떨어집니다.

 

1. Link

import Link from "next/link";
...
// path
<Link href={`/detail/${id}`}>
  <a>item name</a>
</Link>

// object
<Link href={{ pathname: "/about", query: { name: "song" } }}>
    <a>item name</a>
</Link>

* Link 태그에 href 속성을 추가하여 가고자 하는 주소를 넣습니다. (a 태그의 href와 동일합니다.)

* 안쪽에는 a 태그로 감싸줍니다.

* className과 같은 속성들을 a 태그에 추가합니다.

* 페이지 새로고침 없이 페이지가 전환됩니다.

 

Link는 Client-side navigation으로 자바스크립트로 페이지 전환이 이루어집니다.

기본 navigation보다 빠르며 SPA의 특성을 유지합니다.

 

프러덕션 빌드에서 Link 요소가 뷰포트에 나타나면 넥스트는 백그라운드에서 해당 페이지의 코드를 자동으로 설정합니다.

Link와 연결된 페이지를 미리 로드하여 링크 클릭 시 빠르게 전환이 가능합니다.

이것이 pre-fetching 입니다.

 

 

a 태그가 커스텀 컴포넌트일 경우?

Next.js 공식 문서 - next/link 부분

If the child of `Link` is a custom component that wraps an `<a>` tag, you must add `passHref` to `Link`. This is necessary if you’re using libraries like styled-components. Without this, the `<a>` tag will not have the `href` attribute, which hurts your site's accessibility and might affect SEO

만약 styled-components와 같이 a 태그가 커스텀 컴포넌트일 경우 Link 태그에 passHref 속성을 주어야 합니다.

이 속성이 없을 경우 a 태그에는 href 속성이 없어 접근성과 SEO에 영향을 줍니다.

 

 

 

2. Router

import Link from "next/link";
import Router, { useRouter } from "next/router";
...
const router = useRouter();
...
// Router
<div onClick={() => Router.push("/about")}>Router</div>

// router
<div onClick={() => router.push("/about")}>router</div>

// object
<div
    onClick={() =>
      router.push({ pathname: "/about", query: { name: "song" } })
    }
>
	router
</div>

라우터를 이용하여 페이지를 전환합니다.

react-router-dom의 history.push()와 유사합니다.

 

* 크롤러가 링크를 감지하지 못하여 SEO가 좋지 않을 수도 있습니다.

* <Link>는 클릭 시 바로 페이지가 전환되지만 라우터는 로직을 처리 후 원하는 시점에서 전환이 가능합니다.

* 외부 URL을 사용할 경우 window.location 혹은 a 태그를 사용해야 합니다.

 

router에는 push 말고도 많은 기능들이 있습니다.

그중 몇 가지 소개해드리겠습니다.

 

1. router.push

페이지가 이동되며 히스토리 스택이 쌓입니다.

Main -> Login -> List에서 마이페이지로 push 하면 Main -> Login -> List -> Mypage

 

2. router.replace

페이지가 이동되며 히스토리 스택이 교체됩니다.

Main -> Login -> List 에서 마이페이지로 replace 하면 Main -> Login -> Mypage

 

3. router.back

뒤로 가는 기능이며 "window.history.back()"과 동일합니다.

 

4. router.reload

새로고침 기능이며 "window.location.reload()"와 동일합니다.

 

 

감사합니다.

 

 

참고 :
https://nextjs.org/docs/api-reference/next/link

https://nextjs.org/docs/api-reference/next/router#userouter