[Next JS] 라우팅

Medium_ryan ㅣ 2024. 10. 7. 17:49

서론

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 페이지가 생성됨.

app 폴더 내부에 find-pw, sign-in, sign-up과 같은 폴더가 존재한다. 이는 모두 페이지의 path에 해당한다.

 

  • 페이지 그룹화

(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만의 라우팅 방식.

처음에는 혼란스러웠지만, 알게 되면 쉽고 간편해서 좋은 것 같다.