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]'는 사용할 수 없다.