From 69bab67f9830f2459230cdaa55ef4216cdc555e9 Mon Sep 17 00:00:00 2001 From: grapefruit13 Date: Mon, 5 Aug 2024 12:24:59 +0900 Subject: [PATCH] =?UTF-8?q?[#84]=20docs:=20getStaticProps=20=EB=B2=88?= =?UTF-8?q?=EC=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../functions/get-static-props.mdx | 117 +++++++++--------- 1 file changed, 59 insertions(+), 58 deletions(-) diff --git a/pages/docs/pages/api-reference/functions/get-static-props.mdx b/pages/docs/pages/api-reference/functions/get-static-props.mdx index 1847552..fa561de 100644 --- a/pages/docs/pages/api-reference/functions/get-static-props.mdx +++ b/pages/docs/pages/api-reference/functions/get-static-props.mdx @@ -3,11 +3,9 @@ title: getStaticProps description: API reference for `getStaticProps`. Learn how to use `getStaticProps` to generate static pages with Next.js. --- -{/* TODO: 번역이 필요합니다. */} - # getStaticProps -Exporting a function called `getStaticProps` will pre-render a page at build time using the props returned from the function: +`getStaticProps`라는 함수를 내보내면, 함수에서 반환된 props를 사용하여 빌드 시점에 페이지를 사전 렌더링합니다: ```tsx filename="pages/index.tsx" switcher import type { InferGetStaticPropsType, GetStaticProps } from 'next' @@ -44,47 +42,51 @@ export default function Page({ repo }) { } ``` -You can import modules in top-level scope for use in `getStaticProps`. Imports used will **not be bundled for the client-side**. This means you can write **server-side code directly in `getStaticProps`**, including fetching data from your database. +`getStaticProps`에서 사용하기위해 모듈을 최상위 스코프에서 import 할 수 있습니다. 사용된 import는 **클라이언트 측 번들에 포함되지 않습니다**. 이는 **서버 측 코드를 `getStaticProps`에서 직접** 작성할 수 있다는 것을 의미하며, 여기에는 데이터베이스에서 데이터를 가져오는 작업이 포함됩니다. ## Context parameter -The `context` parameter is an object containing the following keys: +`context` 매개변수는 다음 키를 포함하는 객체입니다: + +| Name | Description | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `params` | +| [동적 경로](/docs/pages/building-your-application/routing/dynamic-routes)를 사용하는 페이지의 경로 매개변수를 포함합니다. 예를 들어, 페이지 이름이 `[id].js`인 경우, `params`는 `{ id: ... }`와 같습니다. 이는 나중에 설명할 `getStaticPaths`와 함께 사용해야 합니다. | +| `preview` | -| Name | Description | -| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `params` | Contains the route parameters for pages using [dynamic routes](/docs/pages/building-your-application/routing/dynamic-routes). For example, if the page name is `[id].js`, then `params` will look like `{ id: ... }`. You should use this together with `getStaticPaths`, which we'll explain later. | -| `preview` | (Deprecated for `draftMode`) `preview` is `true` if the page is in the [Preview Mode](/docs/pages/building-your-application/configuring/preview-mode) and `false` otherwise. | -| `previewData` | (Deprecated for `draftMode`) The [preview](/docs/pages/building-your-application/configuring/preview-mode) data set by `setPreviewData`. | -| `draftMode` | `draftMode` is `true` if the page is in the [Draft Mode](/docs/pages/building-your-application/configuring/draft-mode) and `false` otherwise. | -| `locale` | Contains the active locale (if enabled). | -| `locales` | Contains all supported locales (if enabled). | -| `defaultLocale` | Contains the configured default locale (if enabled). | -| `revalidateReason` | Provides a reason for why the function was called. Can be one of: "build" (run at build time), "stale" (revalidate period expired, or running in [development mode](/docs/pages/building-your-application/data-fetching/get-static-props#runs-on-every-request-in-development)), "on-demand" (triggered via [on-demand revalidation](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation)) | +(`draftMode`에서는 더 이상 사용되지 않습니다.) 페이지가 [미리 보기 모드](/docs/pages/building-your-application/configuring/preview-mode)일 경우 `true`이고, 그렇지 않을 경우 `false`입니다.| +| `previewData` | (`draftMode`에서는 더 이상 사용되지 않습니다.) `setPreviewData`에 의해 설정된 [미리 보기](/docs/pages/building-your-application/configuring/preview-mode) 데이터입니다. | +| `draftMode` | 페이지가 [Draft Mode](/docs/pages/building-your-application/configuring/draft-mode)일 경우 `true`이고, 그렇지 않을 경우 `false`입니다. | +| `locale` | 활성화된 로케일을 포함합니다 (활성화된 경우). | +| `locales` | 지원하는 모든 로케일을 포함합니다 (활성화된 경우). | +| `defaultLocale` | 구성된 기본 로케일을 포함합니다 (활성화된 경우). | +| `revalidateReason` | 함수가 호출된 이유를 제공합니다. 다음 중 하나일 수 있습니다: "build" (빌드 시점에 실행), "stale" (재검증 기간 만료 또는 [개발 모드](/docs/pages/building-your-application/data-fetching/get-static-props#runs-on-every-request-in-development)에서 실행), "on-demand" ([온디맨드 재검증](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation)을 통해 트리거됨) | ## getStaticProps return values -The `getStaticProps` function should return an object containing either `props`, `redirect`, or `notFound` followed by an **optional** `revalidate` property. +`getStaticProps` 함수는 선택적 `revalidate` 프로퍼티와 함께 `props`, `redirect` 또는 `notFound`가 포함된 객체를 반환해야 합니다. ### `props` -The `props` object is a key-value pair, where each value is received by the page component. It should be a [serializable object](https://developer.mozilla.org/docs/Glossary/Serialization) so that any props passed, could be serialized with [`JSON.stringify`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify). +`props` 객체는 키-값 쌍으로, 각 값은 페이지 컴포넌트에서 받습니다. +전달된 모든 props들이 [`JSON.stringify`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)로 직렬화될 수 있도록, 이 값은 [직렬화 가능한 객체](https://developer.mozilla.org/docs/Glossary/Serialization)여야 합니다. ```jsx export async function getStaticProps(context) { return { - props: { message: `Next.js is awesome` }, // will be passed to the page component as props + props: { message: `Next.js is awesome` }, // 이 값은 페이지 컴포넌트에 props로 전달됩니다. } } ``` ### `revalidate` -The `revalidate` property is the amount in seconds after which a page re-generation can occur (defaults to `false` or no revalidation). +`revalidate` 프로퍼티는 페이지가 재생성되는 시간(초)입니다(기본값은 'false' 또는 재검증 없음). ```js -// This function gets called at build time on server-side. -// It may be called again, on a serverless function, if -// revalidation is enabled and a new request comes in +// 이 함수는 서버 측에서 빌드 시점에 호출됩니다. +// 재검증이 활성화되고 새로운 요청이 들어오는 경우, 서버리스 함수에서 다시 호출될 수 있습니다. + export async function getStaticProps() { const res = await fetch('https://.../posts') const posts = await res.json() @@ -93,25 +95,25 @@ export async function getStaticProps() { props: { posts, }, - // Next.js will attempt to re-generate the page: - // - When a request comes in - // - At most once every 10 seconds - revalidate: 10, // In seconds + // Next.js는 페이지 재생성을 시도합니다: + // - 요청이 들어올 때 + // - 최대 10초마다 한 번씩 + revalidate: 10, // 초 단위 } } ``` -Learn more about [Incremental Static Regeneration](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration). +[증분 정적 재생성](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)에 대해 자세히 알아보세요. -The cache status of a page leveraging ISR can be determined by reading the value of the `x-nextjs-cache` response header. The possible values are the following: +ISR을 활용하는 페이지의 캐시 상태는 `x-nextjs-cache` 응답 헤더의 값을 읽어서 확인할 수 있습니다. 가능한 값은 다음과 같습니다: -- `MISS` - the path is not in the cache (occurs at most once, on the first visit) -- `STALE` - the path is in the cache but exceeded the revalidate time so it will be updated in the background -- `HIT` - the path is in the cache and has not exceeded the revalidate time +- `MISS` - 경로가 캐시에 없습니다. (첫 방문 시 최대 한 번 발생) +- `STALE` - 경로가 캐시에 있지만, 재검증 시간을 초과하여 백그라운드에서 업데이트될 예정입니다. +- `HIT` - 경로가 캐시에 있고, 재검증 시간을 초과하지 않았습니다. ### `notFound` -The `notFound` boolean allows the page to return a `404` status and [404 Page](/docs/pages/building-your-application/routing/custom-error#404-page). With `notFound: true`, the page will return a `404` even if there was a successfully generated page before. This is meant to support use cases like user-generated content getting removed by its author. Note, `notFound` follows the same `revalidate` behavior [described here](#revalidate). +`notFound` boolean은 페이지가 `404` 상태를 반환하도록 하며 [404 페이지](/docs/pages/building-your-application/routing/custom-error#404-page)를 표시합니다. `notFound: true`로 설정하면, 이전에 성공적으로 생성된 페이지가 있더라도 페이지는 `404`를 반환합니다. 이는 사용자 생성한 콘텐츠가 작성자에 의해 삭제되는 등의 사용 사례를 지원하기 위한 것입니다. `notFound`는 [여기 설명된 것](#revalidate)과 동일한 `revalidate` 동작을 따름에 주의하세요. ```js export async function getStaticProps(context) { @@ -125,18 +127,18 @@ export async function getStaticProps(context) { } return { - props: { data }, // will be passed to the page component as props + props: { data }, // 프로퍼티로 페이지 컴포넌트에 전달됩니다. } } ``` -> **Good to know**: `notFound` is not needed for [`fallback: false`](/docs/pages/api-reference/functions/get-static-paths#fallback-false) mode as only paths returned from `getStaticPaths` will be pre-rendered. +> **알아두면 좋은 점** : [`fallback: false`](/docs/pages/api-reference/functions/get-static-paths#fallback-false) 모드에서는 `getStaticPaths`에서 반환된 경로만 사전 렌더링되므로 `notFound`가 필요하지 않습니다. ### `redirect` -The `redirect` object allows redirecting to internal or external resources. It should match the shape of `{ destination: string, permanent: boolean }`. +`redirect` 객체는 내부 또는 외부 리소스로 리디렉션할 수 있게 해줍니다. 이는 `{ destination: string, permanent: boolean }`의 형태와 일치해야 합니다. -In some rare cases, you might need to assign a custom status code for older `HTTP` clients to properly redirect. In these cases, you can use the `statusCode` property instead of the `permanent` property, **but not both**. You can also set `basePath: false` similar to redirects in `next.config.js`. +드물게, 구형 `HTTP` 클라이언트가 올바르게 리디렉션되도록 사용자 정의 상태 코드를 할당해야 하는 경우가 있습니다. 이러한 경우 `permanent` 프로퍼티 대신 `statusCode` 프로퍼티를 사용할 수 있지만, **두 가지를 동시에 사용할 수는 없습니다**. 또한 `next.config.js`에서 리디렉션과 유사하게 `basePath: false`를 설정할 수 있습니다. ```js export async function getStaticProps(context) { @@ -154,28 +156,29 @@ export async function getStaticProps(context) { } return { - props: { data }, // will be passed to the page component as props + props: { data }, // 프로퍼티로 페이지 컴포넌트에 전달됩니다. } } ``` If the redirects are known at build-time, they should be added in [`next.config.js`](/docs/pages/api-reference/next-config-js/redirects) instead. +리디렉션이 빌드 시점에 알려진 경우, [`next.config.js`](/docs/pages/api-reference/next-config-js/redirects)에 추가해야 합니다. ## Reading files: Use `process.cwd()` -Files can be read directly from the filesystem in `getStaticProps`. +파일은 `getStaticProps`의 파일시스템에서 직접 읽혀질 수 있습니다. -In order to do so you have to get the full path to a file. +이렇게 하려면 파일의 전체 경로를 가져와야 합니다. -Since Next.js compiles your code into a separate directory you can't use `__dirname` as the path it returns will be different from the Pages Router. +Next.js는 코드를 별도의 디렉토리로 컴파일하기 때문에 `__dirname`을 사용할 수 없습니다. `__dirname`이 반환하는 경로는 페이지 라우터와 다를 수 있기 때문입니다. -Instead you can use `process.cwd()` which gives you the directory where Next.js is being executed. +대신 `process.cwd()`를 사용할 수 있으며, 이는 Next.js가 실행되는 디렉토리를 제공합니다. ```jsx import { promises as fs } from 'fs' import path from 'path' -// posts will be populated at build time by getStaticProps() +// 게시물은 빌드 시점에 getStaticProps()에 의해 채워집니다. function Blog({ posts }) { return (