해리의 유목노트

2023-10-18 업데이트

본 방법은 page router에서 사용하던 방법으로 app route에서는 동작하지 않습니다.

getStaticPaths

Static Generation 전용 생략이 모든 route를 다 받습니다. paths는 아래와같은 형식을 따릅니다.

export interface UrlParams extends ParsedUrlQuery{
  slug: string //폴더나 파일중에 [slug]가 있어야합니다.
}

/**
 * @return {paths:{params:UrlParams}[]} 맵핑 가능한 URL paths
 * @return {fallback} 경로가 없을때 404 뿌려줄지 말지 여부
 */
export const getStaticPaths: GetStaticPaths<UrlParams> = async () => {
  return {paths: [{params: {slug: "aa"}}], fallback: false}
}

getStaticProps

각 페이지에 넘겨줄 데이터입니다.

export const getStaticProps: GetStaticProps<{ route: string }, UrlParams> = async (props) => {
  return {
    props: { route: 'wow' },
    // redirect:""
    // notFound:true
    // revalidate:1
  }
}

Page에서 데이터를 받습니다.

아래 옵션을 주면 처음에 페이지를 생성하고있지 않다고 요청이 들어올때 페이지를 생성합니다. 이 때문에 최초 접근 사용자는 매우 느린 loading타임을 가질 수 있음

fallback - true

요청된 함수에대해 바로 페이지가 호출되기때문에 분기처리를 해주어야합니다.

const FamousDetailPage: NextPage = (param: InferGetStaticPropsType<typeof getStaticProps>) => {
}

경로맵핑

일반적인 라우팅

pages/index.js → /
pages/blog/index.js → /blog
// router.query.page가 문자열로 받아집니다.
pages/blog/[page].js -> / blog/1
//router.query.slug에서 slug가 string[] 으로 받아집니다.
pages/blog/[...slug].js -> / blog/1/2/3/4

중첩라우팅

pages/blog/first-post.js → /blog/first-post
pages/dashboard/settings/username.js → /dashboard/settings/username

다이나믹 라우팅

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)