step 5와 이어집니다.
이전 step에서 동적 라우팅을 어떻게 Next.js에선 할까에 대해서 알아보았는데요.
이번에는 동적 라우팅을 할 때 필수로 알아야 할 Details 를 알아봅시다.
Fetch External API or Query Database
이전 시간에서 배운 getStaticPaths() 또한 외부에서 Fetch를 통한 데이터를 받아오거나 Query를 통한 데이터베이스에서 데이터를 꺼내올 수 있습니다.
예를 들면 getAllPostIds()를 Fetch External 하는 코드라고 생각하고
export async function getAllPostIds() {
// Instead of the file system,
// fetch post data from an external API endpoint
const res = await fetch('..')
const posts = await res.json()
return posts.map(post => {
return {
params: {
id: post.id
}
}
})
}다음과 같은 형식으로 작성하고 사용할 수 있다는 것 입니다.
Development vs Production
개발 모드에서는 (npm run dev or yarn dev) getStaticPaths 는 매 요청마다 동작합니다.
빌드가 된 프로덕트에서는 getStaticPaths 는 빌드 타임에 동작합니다
Fallback
만약 getStaticPathsO()의fallback: false 이면 어떤 상황일까요?
getStaticPaths()에서는 반환되지 않는 모든 값은 404 페이지로 이동합니다.
getStaticPathsO()의fallback: true 일 경우에는 다음과 같이 동작합니다.
- getStaticPaths에서 반환된 경로는 build time에 HTML로 렌더링됩니다.
- 빌드 시 생성되지 않은 경로는 404 페이지가 되지 않습니다. 대신 Next.js는 해당 경로에 대한 첫 번째 요청 시 페이지의 "fallback" 버전을 제공합니다. 더 많은 정보는 다음 문서에서 확인해 보세요. https://nextjs.org/docs/basic-features/data-fetching#the-fallback-key-required
Catch-all Routes
동적 경로는 괄호 안에 세 개의 점(...)을 추가하여 모든 경로를 잡을 수 있도록 확장할 수 있습니다
예를 들어서 pages/posts/[... id].js는 /posts/a와 일치하지만 /posts/a/b, /posts/a/b/c 등도 일치합니다.
이렇게 하면 getStaticPaths에서 어레이를 다음과 같이 ID 키의 값으로 반환해야 합니다.
return [
{
params: {
// Statically Generates /posts/a/b/c
id: ['a', 'b', 'c']
}
}
//...
]그렇게 되면 getStaticProps의 params에는 다음과 같이 전달 됩니다.
export async function getStaticProps({ params }) {
// params.id will be like ['a', 'b', 'c']
}더 많은 정보는 https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes 이곳에서 확인해 보세요
404 page
404 페이지를 커스터 마이징 하고 싶으면 page/404.js 에서 컴포넌트를 만들게 되면 그 컴포넌트를 표출 합니다.
More Examples
몇가지의 getStaticProps and getStaticPaths 잘 사용해 놓은 예제 페이지가 있습니다 — 소스코드를 참조해보면서 확인해 보세요
