React 프레임워크 nextjs에서 페이지 이동하는 다양한 방법과 예제를 알아봅니다.



# nextjs 페이지 이동하는 방법
nextjs에는 SSR(Server Side Rendering)을 목적으로 많이 사용되므로 링크 이동시 두 가지 방법이 사용됩니다.

  • state 변경의 비동기 이동 방식
  • 서버 사이드 렌더링(SSR) 방식의 페이지 이동

아래에서 각각 알아봅니다.


! 서버 사이드 방식의 페이지 이동, nextjs
여기서 두 번째에 해당하는 SSR 방식은 일반적인 자바스크립트 코드나 a 태그를 사용하는 방법을 그대로 사용하는 것입니다.
<a href="/test">Move</a>

자바스크립트를 사용할 수도 있죠.
window.open('/test', '_self');

다음으로 서버사이드렌더링 방식이 아닌 라우팅을 사용한 state를 변경하는 방법을 알아봅니다.


! state(스테이트) 변경의 비동기식 페이지 이동하기
nextjs에서는 Router API를 사용하여 페이지 이동이 가능합니다. 먼저 필요한 모듈을 추가합니다.
import Router from 'next/router';

이제 페이지를 이동하기 위해서 Router 메소드인 push()를 사용합니다. 간단한 사용법은 아래와 같습니다.

Router.push(이동할 경로 또는 옵션)

이 경우 인자를 문자 또는 객체로 넘겨줄 수 있는데 문자로 넘겨줄 경우 이동할 경로를 입력하면 됩니다. 예를들어 /test로 이동을 원한다면 아래와 같을 것입니다.
const targerPage = '/test';
Router.push(targerPage);

이제 페이지는 /test로 이동하게 될 것입니다.


@ 주소에 쿼리스트링 사용하는 페이지 이동
만약 페이지를 이동할 때 현재 또는 다른 페이지에 쿼리 스트링을 사용하려면 어떻게 할까요? 이 경우 이동할 주소 pathname과 query를 분리하여 사용하는 것이 가능합니다. 아래를 봐주세요.
Router.push({
  pathname: '/test',
  query: { sitename: 'webisfreecom' }
})

보시는 것처럼 push에 사용한 인자를 pathname, query 구분하여 사용하였습니다.


! useRouter 또는 withRouter 사용하기
useRouter는 함수형 컴포넌트에서 사용할 수 있는 state hook 방식의 방법입니다.
(모두 추후 업데이트 예정입니다.)


여기까지 nextjs에서 SSR 또는 state Router 방식의 페이지를 이동하는 방법을 알아보았습니다.