-
Notifications
You must be signed in to change notification settings - Fork 202
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
generate-static-params.mdx #375
base: main
Are you sure you want to change the base?
Conversation
ref #79 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
기여해주셔서 감사합니다! 커멘트 확인해주시고 수정해주세요!
--- | ||
|
||
The `generateStaticParams` function can be used in combination with [dynamic route segments](/docs/app/building-your-application/routing/dynamic-routes) to [**statically generate**](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default) routes at build time instead of on-demand at request time. | ||
`generateStaticParams` 함수는 요청 타임 대신에 빌드 타임에 [dynamic route segments](/docs/app/building-your-application/routing/dynamic-routes) to [**statically generate**](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default) routes 와 함께 사용 가능합니다. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
`generateStaticParams` 함수는 요청 타임 대신에 빌드 타임에 [dynamic route segments](/docs/app/building-your-application/routing/dynamic-routes) to [**statically generate**](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default) routes 와 함께 사용 가능합니다. | |
`generateStaticParams` 함수는 [동적 라우트 세그먼트](/docs/app/building-your-application/routing/dynamic-routes)와 함께 사용하여 요청 시에 실시간으로 라우트를 만드는 것이 아닌 빌드 타임에 라우트를 [**정적으로 생성**](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#static-rendering-default) 할 수 있습니다. |
번역 놓치신 부분이 있네요!
export default function Page({ params }) { | ||
const { slug } = params | ||
// ... | ||
} | ||
``` | ||
|
||
> **Good to know** | ||
> **알아두면 좋은 점** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> **알아두면 좋은 점** | |
> **참고** |
기여 가이드에 따라 참고
로 수정해주세요!
> - During `next build`, `generateStaticParams` runs before the corresponding Layouts or Pages are generated. | ||
> - During revalidation (ISR), `generateStaticParams` will not be called again. | ||
> - `generateStaticParams` replaces the [`getStaticPaths`](/docs/pages/api-reference/functions/get-static-paths) function in the Pages Router. | ||
> - `generateStaticParams`로 생성되지 않은 동적 세그먼트를 조회했을 때 일어나는 것들을 [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) 세그먼트 컨피그 옵션을 사용해 제어할 수 있습니다. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> - `generateStaticParams`로 생성되지 않은 동적 세그먼트를 조회했을 때 일어나는 것들을 [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) 세그먼트 컨피그 옵션을 사용해 제어할 수 있습니다. | |
> - `generateStaticParams`로 생성되지 않은 동적 세그먼트를 조회했을 때의 동작을 [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) 세그먼트 설정 옵션을 사용해 제어할 수 있습니다. |
> - During revalidation (ISR), `generateStaticParams` will not be called again. | ||
> - `generateStaticParams` replaces the [`getStaticPaths`](/docs/pages/api-reference/functions/get-static-paths) function in the Pages Router. | ||
> - `generateStaticParams`로 생성되지 않은 동적 세그먼트를 조회했을 때 일어나는 것들을 [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) 세그먼트 컨피그 옵션을 사용해 제어할 수 있습니다. | ||
> - `next dev`가 실행되는 동안, `generateStaticParams` 는 route 로 이동하는 할 때 호출될 것입니다. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> - `next dev`가 실행되는 동안, `generateStaticParams` 는 route 로 이동하는 할 때 호출될 것입니다. | |
> - `next dev`가 실행되는 동안, `generateStaticParams`는 라우트로 이동할 때 호출됩니다. |
> - `generateStaticParams`로 생성되지 않은 동적 세그먼트를 조회했을 때 일어나는 것들을 [`dynamicParams`](/docs/app/api-reference/file-conventions/route-segment-config#dynamicparams) 세그먼트 컨피그 옵션을 사용해 제어할 수 있습니다. | ||
> - `next dev`가 실행되는 동안, `generateStaticParams` 는 route 로 이동하는 할 때 호출될 것입니다. | ||
> - `next build`가 실행되는 동안, `generateStaticParams` 는 일치하는 레이아웃 또는 페이지가 생성되기 전에 실행됩니다. | ||
> - revalidation 이 일어나는 동안(ISR), `generateStaticParams` 는 다시 호출되지 않습니다. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> - revalidation 이 일어나는 동안(ISR), `generateStaticParams` 는 다시 호출되지 않습니다. | |
> - 재검증(ISR)이 일어나는 동안, `generateStaticParams`는 다시 호출되지 않습니다. |
|
||
The child `generateStaticParams` function can use the `params` returned from the parent `generateStaticParams` function to dynamically generate its own segments. | ||
하위 `generateStaticParams` 함수는 상위 `generateStaticParams` 함수에서 반환된 `params`를 사용해 자체 세그먼트를 동적으로 생성할 수 있습니다. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
하위 `generateStaticParams` 함수는 상위 `generateStaticParams` 함수에서 반환된 `params`를 사용해 자체 세그먼트를 동적으로 생성할 수 있습니다. | |
자식 `generateStaticParams` 함수는 부모 `generateStaticParams` 함수에서 반환된 `params`를 사용해 자체 세그먼트를 동적으로 생성할 수 있습니다. |
|
||
```tsx filename="app/products/[category]/[product]/page.tsx" switcher | ||
// Generate segments for [product] using the `params` passed from | ||
// the parent segment's `generateStaticParams` function | ||
// 상위 세그먼트의 `generateStaticParams` 함수에서 전달된 `params`를 사용하여 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// 상위 세그먼트의 `generateStaticParams` 함수에서 전달된 `params`를 사용하여 | |
// 부모 세그먼트의 `generateStaticParams` 함수에서 전달된 `params`를 사용하여 |
@@ -282,8 +282,8 @@ export default function Page({ | |||
``` | |||
|
|||
```jsx filename="app/products/[category]/[product]/page.js" switcher | |||
// Generate segments for [product] using the `params` passed from | |||
// the parent segment's `generateStaticParams` function | |||
// 상위 세그먼트의 `generateStaticParams` 함수에서 전달된 `params`를 사용하여 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
// 상위 세그먼트의 `generateStaticParams` 함수에서 전달된 `params`를 사용하여 | |
// 부모 세그먼트의 `generateStaticParams` 함수에서 전달된 `params`를 사용하여 |
@@ -299,10 +299,10 @@ export default function Page({ params }) { | |||
} | |||
``` | |||
|
|||
> **Good to know**: When rendering a route, Next.js will [automatically deduplicate `fetch` requests](/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping) for the same data across `generateMetadata`, `generateStaticParams`, Layouts, Pages, and Server Components. React [`cache` can be used](/docs/app/building-your-application/data-fetching/caching#react-cache) if `fetch` is unavailable. | |||
> **알아두면 좋은 점**: 경로를 렌더링할 때, Next.js 는 `generateMetadata`, `generateStaticParams`, 레이아웃, 페이지와 서버 컴포넌트에서 동일한 데이터에 대한 요청이 있다면 [자동으로 `fetch` 요청에 대해 중복건을 제거](/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping) 할 것입니다. 리액트에서 `fetch` 가 사용이 불가하다면 [`캐시` 를 사용할 수 있습니다.](/docs/app/building-your-application/data-fetching/caching#react-cache) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> **알아두면 좋은 점**: 경로를 렌더링할 때, Next.js 는 `generateMetadata`, `generateStaticParams`, 레이아웃, 페이지와 서버 컴포넌트에서 동일한 데이터에 대한 요청이 있다면 [자동으로 `fetch` 요청에 대해 중복건을 제거](/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping) 할 것입니다. 리액트에서 `fetch` 가 사용이 불가하다면 [`캐시` 를 사용할 수 있습니다.](/docs/app/building-your-application/data-fetching/caching#react-cache) | |
> **참고**: 경로를 렌더링할 때, Next.js 는 `generateMetadata`, `generateStaticParams`, 레이아웃, 페이지와 서버 컴포넌트에 걸쳐서 동일한 데이터에 대한 [`fetch` 요청의 중복을 자동으로 제거](/docs/app/building-your-application/data-fetching#automatic-fetch-request-deduping)합니다. 리액트에서 `fetch`를 사용할 수 없다면 [`cache`를 사용할 수 있습니다.](/docs/app/building-your-application/data-fetching/caching#react-cache) |
| --------- | ---------------------------------- | | ||
| `v13.0.0` | `generateStaticParams` introduced. | | ||
| `v13.0.0` | `generateStaticParams` 안내 | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| `v13.0.0` | `generateStaticParams` 안내 | | |
| `v13.0.0` | `generateStaticParams` 도입 | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
기여해주셔서 감사합니다! 커멘트 확인해주시고 수정해주세요!
네트워크 오류로 2번 제출되었네요! 😅
@kordobby 리뷰 이후 작업이 몇일 동안 이뤄지지 않아 9월 13일까지 작업이 없을 경우 이슈를 close하고 새로운 분에게 할당하겠습니다! |
기여자용
문서 개선
pnpm prettier-fix
를 실행하여 서식 문제를 해결합니다. - 문서 기여 가이드를 읽고 문서 지침을 따르는지 확인하세요: https://github.com/Nextjs-kr/Nextjs.ko/blob/main/packages/next/README.mdProgress
pnpm prettier-fix
closes #79