Next.js - 라우팅과 네비게이션 (Routing and Navigation)

네비게이션

 

Next.js에서 라우팅과 네비게이션을 하는 방법을 알아보자. 먼저 새로운 페이지를 만들기 위해 pages/hello.js 파일을 만들어 다음과 같이 코드를 작성해준다.

 

const hello = () => <h1>Hello page~</h1>;

export default hello;

 

그 후, 다시 index.js 파일로 돌아가 다음과 같은 링크를 생성해준다.

 

import Link from "next/link";

const index = () => (
  <>
    <h1>hello world</h1>
    <Link href="/hello">
      <a>Hello Page</a>
    </Link>
  </>
);

export default index;

 

이제 다시 인덱스 페이지로 돌아가면 다음과 같이 링크가 생성되어 있는 것을 볼 수 있다.

 

또한, a 태그를 확인해보면 아래와 같이 나온다.

 

 

즉, Link 컴포넌트를 사용한다고 하여서 a태그 위에 무언가가 덧씌워지는 것이 아닌, a 태그 자체에 href를 부여해준다. 우리는 링크에 속성이나 props를 넣어줘야 할 때가 있다. props들을 넣어주고 싶다면 Link가 아닌 a 태그 안에 넣어주어야 하며, 그렇게 하지 않는 다면 (Link에 props를 넣어준다면) 에러가 발생한다. 따라서 props를 넣어주고 싶다면 다음과 같이 넣어주자.

 

<Link href="/hello">
  <a title="hello">Hello Page</a>
</Link>

 

그 후 태그를 렌더링 결과를 확인해 보면 다음과 같이 잘 들어가 있는 것을 확인할 수 있다.

 

 

react-router-dom과 다른 점은 Link 자체가 하나의 a 태그를 생성해주는 것이 아닌, Link는 a 태그에 props만 추가적으로 부여해준다는 것이다.

 

동적 라우팅

react-router-dom 에서는 Route 컴포넌트의 path 속성에 '/user/:id'라는 값을 넣어주면 자동으로 params를 이용한 동적 라우팅이 설정되었었다. 그렇다면 Next.js에서는 이를 어떻게 하면 될까?

 

정답부터 말하자면, 앞에 콜론을 넣어주는 것이 아닌 대괄호로 감싸주는 것으로 동적 라우팅을 할 수 있다. pages폴더 내에 user 폴더를 만들고 그 안에 [id]폴더를 만들어준다. 그 후, [id]폴더 안에 index.js를 다음과 같이 작성하여준다. 즉, index.js 파일의 위치는 pages/user/[id]/index.js 이다.

 

import { useRouter } from "next/router";

export default function Index() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <>
      <h1>{id}</h1>
      <p>Hello {id}!</p>
    </>
  );
}

 

그 후, pages/hello.js 파일을 다음과 같이 바꿔준다.

 

import Link from "next/link";

const UserLink = ({ id }) => (
  <li>
    <Link href="/user/[id]" as={`/user/${id}`}>
      <a>{id}</a>
    </Link>
  </li>
);

const hello = () => (
  <ul>
    <UserLink id="Beom Seok" />
    <UserLink id="Ben" />
    <UserLink id="BUUM" />
  </ul>
);

export default hello;

 

그 후, localhost:3000/hello에 들어가면 다음과 같은 페이지가 뜨는 것을 확인할 수 있다.

 

이제 아무 링크나 클릭하여 들어가면 다음과 같은 페이지가 뜨는 것을 확인할 수 있다.

 

 

또한 이는 index.js 페이지이기 때문에 다음과 같이 다른 페이지를 띄울 수도 있다. 먼저 /pages/user/[id]/ 에 [comment].js 파일을 만들어 다음과 같이 코드를 작성해준다.

 

import { useRouter } from "next/router";

const Comment = () => {
  const { id, comment } = useRouter().query;

  return (
    <>
      <h1>User: {id}</h1>
      <p>comment: {comment}</p>
    </>
  );
};

export default Comment;

 

이제 hello.js를 다음과 같이 바꿔준다.

 

import Link from "next/link";

const UserLink = ({ id }) => (
  <li>
    <Link href="/user/[id]" as={`/user/${id}`}>
      <a>{id}</a>
    </Link>
  </li>
);

const UserCommentLink = ({ id, comment }) => (
  <li>
    <Link href="/user/[id]/[comment]" as={`/user/${id}/${comment}`}>
      <a>
        {id}, {comment}
      </a>
    </Link>
  </li>
);

const hello = () => (
  <ul>
    <UserLink id="Beom Seok" />
    <UserLink id="Ben" />
    <UserLink id="BUUM" />
    <UserCommentLink id="Beom Seok" comment="hello world!" />
  </ul>
);

export default hello;

 

이제 localhost:3000/hello에 들어가면 다음과 같이 링크들이 생성된 것을 볼 수 있다.

 

 

마지막 링크를 클릭하여 들어가면 아래와 같이 comment도 잘 나오는 것을 확인할 수 있다.

 

이렇게 동적 라우팅을 사용하면 매우 간편하다. 여기에는 하나의 규칙이 있는데, 페이지의 전체 이름만 동적으로 만들 수 있다는 것이다. 페이지 이름 중 일부만 동적으로 변경할 수는 없다. 예를 들어 '/pages/user/[id]'는 가능하지만, 'pages/user/user-[id]'는 사용할 수 없다.

 

출처

jcon.tistory.com/125