[Next.js] Routing

Next.js에서의 라우팅

pages 폴더를 이용하여 경로를 설정할 수 있다. Next.js에서 라우팅 설정은 pages폴더에 파일을 만들면 파일의 경로에 따라 경로가 설정이 된다.

정적 페이지 라우팅

pages폴더 index.jsx 파일 ('/' 경로를 가지는 페이지)

import Link from 'next/link';

const App = () => {
  return (
    <div>
      <h2>Link to example Page</h2>
      <Link href="/example">
        <a>example 페이지로 이동</a>
      </Link>
    </div>
  );
};

Link 컴포넌트

위의 코드에서 Link 컴포넌트를 import 하여 페이지간 이동하는 것을 알 수 있다. Next.js에서 주소 이동을 할 때에는 주로 Link 컴포넌트를 사용한다. Link 컴포넌트를 사용하여 주소 이동을 하게 되면 브라우저의 History API를 지원함으로써 뒤로가기를 할 때 이전에 렌더링된 페이지를 가져온다.

✔ Link 컴포넌트를 사용하지 않고 a태그 만을 이용하여 주소 이동

<a href="/example">
  <p>example 페이지로 이동</p>
</a>

👎 페이지 전체를 새로 받아오게 되어 속도가 느려지고 깜박임이 발생한다. 뒤로가기를 해도 페이지를 새로 받아온다.

✔ Link 컴포넌트 안에 a태그를 사용하지 않고 주소 이동

<Link href="/example">
  <p>example 페이지로 이동</p>
</Link>

👎 Link 컴포넌트로 감싼 기본적인 Html 태그들은 라우팅 기능을 수행하지만 웹 접근성과 SEO에 좋지 않음

✔ Link 컴포넌트에 리액트 컴포넌트 사용하여 주소 이동

<Link href="/example">
  <Child />
</Link>

👎 Child 컴포넌트를 클릭해도 라우팅이 되지 않는다. Child 컴포넌트를 a태그로 감싸준다면 라우팅이 가능하다.

동적 페이지 라우팅

pages 폴더에 example 폴더 안의 [name].jsx파일

import Link from 'next/link';

const name = () => {
  return (
    <div>
      <Link href="/">
        <a>/ 페이지로 이동</a>
      </Link>
    </div>
  );
};

export default name;

이렇게 파일 이름을 대괄호로 감싸서 만들면 이는 정적 페이지가 아닌 동적 페이지임을 의미한다. 이 동적 페이지로 이동할 수 있도록 index.jsx파일을

import Link from 'next/link';

const App = () => {
  return (
    <div>
      <h2>Link to 'yongwoo' Page</h2>
      <Link href="/example/yongwoo">
        <a>/example/yongwoo 페이지로 이동</a>
      </Link>
    </div>
  );
};

이렇게 수정할 경우 [name].jsx페이지로 이동이 가능하다. 파일 이름에서 대괄호 안에 있는 값은 라우터 객체의 query 속성으로 들어간다.

❓ 라우터 객체의 값을 확인하는 방법은 ?
👉 'next/router'의 useRouter hook을 사용하여 확인할 수 있다. useRouter은 라우트 객체를 return 한다.

확인해보면 query: {name: "yongwoo"} 값이 들어 있는 것을 확인할 수 있다.

라우터 객체를 이용하여 라우팅

주소 이동을 항상 Link 컴포넌트를 사용하여 하지는 않는다. 함수 내에서 라우트 이동을 하게 되는 경우엔 라우터 객체의 함수를 이용한다. 라우터 객체 안에는 push, replace, back 등의 함수를 이용하여 주소를 이동할 수 있다.

<button type="button" onClick={() => Router.push("/yongwoo")}>
  정적 주소 이동
</button>
<button type="button" onClick={() => Router.push(`/example/${name}`)}>
  동적 주소 이동
</button>