Next.js 13은 app
디렉토리를 이용해 페이지 구성과 라우팅 기능을 만들 수 있습니다.
page 파일에 대하여
13버전은 page.tsx
파일이 주소로 맵핑 됩니다.
정적 라우팅부터 예시로 알아보겠습니다.
정적 라우팅
app
폴더 안에 맵핑하고자 하는 주소 이름을 폴더로 만듭니다.그 후 해당 폴더 안에
page
라는 파일을 만들면 맵핑이 됩니다.
또 다른 예시
동적 라우팅
12버전과 동일하게 폴더 명을 [ ]
로 하고 안에 keyword 을 작성하면 됩니다. ➡️ [keyword]
하지만 보통 'slug' 키워드를 사용해서 [slug]
표현을 합니다.
그리고 React 에서 params 을 해당 이동한 페이지에서 받을 수 있듯이 여기서도 마찬가지로 어떤 경로에 왔는지 해당 하는 페이지의 params 을 알 수 있습니다.
즉, slug 에 어떤 경로가 왔는지 알아야 하는데 Next.js 가 자동으로 컴포넌트에 props 전달해줍니다.
해당 컴포넌트에서 props로 받자
/shop/product/[slug]/page.tsx
결과
위의 코드를 이렇게 작성해도 결과는 동일 합니다.
동적 라우팅은 정해진 경로가 아니라 동적으로 어떤 경로도 접근 할 수 있기 때문에 빌드를 할 때 페이지를 미리 만들 수 없습니다.
동적 라우팅 기능은 이용하지만 원하는 경로만 따로 페이지를 미리 만들 수 없을까요 ?
➡️ generateStaticParams
를 사용하면 됩니다.
generateStaticParams
동적 라우팅을 사용하는 컴포넌트안에서 명시 합니다.
확인할 때는 yarn build
➡️ 각 경로 옆에 아이콘은 어떤 페이지인지 알려주는 용도 입니다.
➡️ /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