Next.js - 13버전 라우팅

Next.js - 13버전 라우팅

·

2 min read

Next.js 13은 app 디렉토리를 이용해 페이지 구성과 라우팅 기능을 만들 수 있습니다.

page 파일에 대하여

1

13버전은 page.tsx 파일이 주소로 맵핑 됩니다.

정적 라우팅부터 예시로 알아보겠습니다.

정적 라우팅

  1. app 폴더 안에 맵핑하고자 하는 주소 이름을 폴더로 만듭니다.

  2. 그 후 해당 폴더 안에 page 라는 파일을 만들면 맵핑이 됩니다.

2

1

또 다른 예시

4

2

동적 라우팅

12버전과 동일하게 폴더 명을 [ ]로 하고 안에 keyword 을 작성하면 됩니다. ➡️ [keyword]

하지만 보통 'slug' 키워드를 사용해서 [slug] 표현을 합니다.

그리고 React 에서 params 을 해당 이동한 페이지에서 받을 수 있듯이 여기서도 마찬가지로 어떤 경로에 왔는지 해당 하는 페이지의 params 을 알 수 있습니다.

즉, slug 에 어떤 경로가 왔는지 알아야 하는데 Next.js 가 자동으로 컴포넌트에 props 전달해줍니다.

해당 컴포넌트에서 props로 받자

3

/shop/product/[slug]/page.tsx

carbon

결과

3

위의 코드를 이렇게 작성해도 결과는 동일 합니다.

10

동적 라우팅은 정해진 경로가 아니라 동적으로 어떤 경로도 접근 할 수 있기 때문에 빌드를 할 때 페이지를 미리 만들 수 없습니다.

동적 라우팅 기능은 이용하지만 원하는 경로만 따로 페이지를 미리 만들 수 없을까요 ?

➡️ generateStaticParams 를 사용하면 됩니다.

generateStaticParams

동적 라우팅을 사용하는 컴포넌트안에서 명시 합니다.

5

확인할 때는 yarn build

6

➡️ 각 경로 옆에 아이콘은 어떤 페이지인지 알려주는 용도 입니다.

➡️ /shop/product/[slug] 안에 3개의 페이지가 정적으로 만들어진 것을 볼 수 있습니다.

➡️ generateStaticParams 을 사용하면 빌드 할 때 미리 만들어둡니다. (해당 경로만 SSG)


참고

https://akoskm.com/how-to-build-static-web-apps-with-dynamic-routes-in-nextjs-13

https://beta.nextjs.org/docs/routing/pages-and-layouts

https://beta.nextjs.org/docs/api-reference/generate-static-params

https://velog.io/@brgndy/Next.js-13-%EB%9D%BC%EC%9A%B0%ED%8C%85

https://mycodings.fly.dev/blog/2022-11-14-nextjs-13-first-look-and-layout