서론
Next.js 13 버전 이후의 라우팅 시스템은 매우 직관적이며, 편리하다.
일하면서 알게된 점, Vercel, Nomad coder에서 공부한 것을 간단하게 정리해 본다.
본론
- path 추가
기본적으로 13버전 이후로는 App directory를 사용한다.
그리고 App폴더 내부에 존재하는 폴더명이 그대로 웹페이지의 path가 된다. (단 폴더 내부에 page.tsx / page.jsx 파일이 존재해야 함.)
기본적인 라우팅 시스템은 이게 전부이다. 너무 깔끔해서 놀라울 정도이다.
your-app/src/app/sign-in/page.tsx
// sign-in 페이지가 생성됨.
- 페이지 그룹화
(sign) 폴더와 같이 페이지를 그룹화할 수 있다.
ex) your-app/src/app/(sign)/sign-in/page.tsx
// sign-in 페이지가 생성됨.이는 path에 영향을 주지 않고, 사용처에 맞는 라우팅을 그룹화하는데 유용하다.
- 동적 라우팅
content/[id]와 같이 동적 라우팅이 가능하다.
your-app/src/app/content/[id]/page.tsx
// content/~~ 페이지가 생성됨. content뒤에 붙는 path값은 동적으로 생성됨.
export default async function ContentPage({
params,
}: {
params: { id: string };
}) {
return (
<div>id is {params.id}</div>
);
}
// 동적 path값은 위와 같은 방식으로 취득할 수 있다.결론
React와는 다른 방식으로 쉽게 구현 가능한 next만의 라우팅 방식.
처음에는 혼란스러웠지만, 알게 되면 쉽고 간편해서 좋은 것 같다.