02-app > 02-api-reference > 05-next-config-js > generateBuildId.mdx 번역

docs/01-getting-started/02-project-structure.mdx

@@ -13,7 +13,7 @@ description: Next.js 프로젝트에 속한 디렉토리와 파일명 규칙
 | **Next.js**                                                                                 |                                      |
 | [`next.config.js`](/docs/app/api-reference/next-config-js)                                  | Next.js 설정 파일                    |
 | [`middleware.ts`](/docs/app/building-your-application/routing/middleware)                   | Next.js 요청 미들웨어                |
-| [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation)      | Open Telemetry                      |
+| [`instrumentation.ts`](/docs/app/building-your-application/optimizing/instrumentation)      | Open Telemetry                       |
 | [`.env`](/docs/app/building-your-application/configuring/environment-variables)             | 기본 환경변수                        |
 | [`.env.local`](/docs/app/building-your-application/configuring/environment-variables)       | 로컬 환경변수                        |
 | [`.env.production`](/docs/app/building-your-application/configuring/environment-variables)  | 프로덕션 환경변수                    |

docs/02-app/01-building-your-application/05-optimizing/01-images.mdx

@@ -31,7 +31,7 @@ Next.js Image 컴포넌트는 HTML `<img>` 요소를 확장하여 자동 이미
 import Image from 'next/image'
 ```
 
-위와 같이 작성한 이후, 로컬 및 원격 이미지에 대한 `src`를 정의 할 수 있습니다. 
+위와 같이 작성한 이후, 로컬 및 원격 이미지에 대한 `src`를 정의 할 수 있습니다.
 
 ### 로컬 이미지
 
@@ -93,7 +93,6 @@ Next.js는 빌드 과정 중 원격 파일에 대해 접근하지 않기 때문
 
 `width`와 `height` 속성은 이미지의 올바른 비율을 추론하고, 이미지 로드로 인한 레이아웃 변화를 방지하는 데 사용됩니다. `width`와 `height`는 이미지 파일의 렌더링 된 크기를 _결정하지 않습니다._ [이미지 크기 지정](#이미지-크기-지정)에 대해 더 알아보세요.
 
-
 ```jsx filename="app/page.js"
 import Image from 'next/image'
 
@@ -109,7 +108,7 @@ export default function Page() {
 }
 ```
 
-안전하게 이미지를 최적화하기 위해서, `next.config.js`에서 지원되는 URL 패턴의 목록을 정의하세요. 악의적인 사용을 방지하기 위해서 가능한 한 구체적으로 정의하세요. 
+안전하게 이미지를 최적화하기 위해서, `next.config.js`에서 지원되는 URL 패턴의 목록을 정의하세요. 악의적인 사용을 방지하기 위해서 가능한 한 구체적으로 정의하세요.
 예를 들어, 다음 구성은 특정 AWS S3 버킷에서만 이미지를 허용합니다.
 
 ```js filename="next.config.js"
@@ -146,7 +145,7 @@ module.exports = {
 Next.js에서 사용되는 기본 로더는 내장된 Image Optimization API를 사용합니다. 이 API는 웹의 어디서나 이미지를 최적화하고, 그리고 Next.js 웹 서버에서 직접 제공합니다. CDN이나 이미지 서버에서 이미지를 직접 제공하려면, 몇 줄의 JavaScript로 로더 함수를 작성할 수 있습니다.
 
 [`loader` 속성](/docs/app/api-reference/components/image#loader)로 이미지별 로더를 정의할 수 있습니다. 또는 [`loaderFile` 구성](/docs/app/api-reference/components/image#loaderfile)으로 애플리케이션 수준으로 정의가 가능합니다.
- 
+
 ## 우선순위
 
 각 페이지에 [Largest Contentful Paint (LCP) 요소](https://web.dev/lcp/#what-elements-are-considered)가 될 이미지에 `priority` 속성을 추가해야 합니다.
@@ -155,7 +154,6 @@ LCP 요소는 페이지의 뷰포트 내에서 일반적으로 가장 큰 이미
 
 LCP에 해당하는 이미지인 것을 알았다면, 다음과 같이 속성을 추가할 수 있습니다.
 
-
 <PagesOnly>
 
 ```jsx filename="app/page.js"
@@ -197,7 +195,7 @@ priority에 대해 더 알아보려면 [`next/image` 컴포넌트 문서](/docs/
 
 ## 이미지 크기 지정
 
-이미지가 일반적으로 성능을 저하하는 방법의 하나는, 이미지가 로드될 때 페이지의 다른 요소를 밀어 넣는 _layout shift_ 입니다. 이 성능 문제는 사용자에게 매우 성가셔서 [Cumulative Layout Shift](https://web.dev/cls/)라고 불리는 자체적인 Core Web Vital을 가지고 있습니다. 이미지 기반의 레이아웃 이동을 방지하는 방법은 [항상 이미지의 크기를 지정](https://web.dev/optimize-cls/#images-without-dimensions)하는 것입니다. 이렇게 하면 브라우저가 이미지가 로드되기 전에 이미지를 위한 충분한 공간을 확보할 수 있습니다. 
+이미지가 일반적으로 성능을 저하하는 방법의 하나는, 이미지가 로드될 때 페이지의 다른 요소를 밀어 넣는 _layout shift_ 입니다. 이 성능 문제는 사용자에게 매우 성가셔서 [Cumulative Layout Shift](https://web.dev/cls/)라고 불리는 자체적인 Core Web Vital을 가지고 있습니다. 이미지 기반의 레이아웃 이동을 방지하는 방법은 [항상 이미지의 크기를 지정](https://web.dev/optimize-cls/#images-without-dimensions)하는 것입니다. 이렇게 하면 브라우저가 이미지가 로드되기 전에 이미지를 위한 충분한 공간을 확보할 수 있습니다.
 
 `next/image`는 성능 결과를 보장하기 위해 설계되었기 때문에, 레이아웃 이동에 기여할 수 있는 방식으로 사용할 수 없으며, **반드시** 다음 세 가지 방법 중 한 가지를 선택하여 크기를 지정해야 합니다.
 
@@ -214,10 +212,10 @@ priority에 대해 더 알아보려면 [`next/image` 컴포넌트 문서](/docs/
 > [`fill`](/docs/app/api-reference/components/image#fill) 속성은 상위 요소에 의해 이미지 크기를 조정할 수 있습니다. CSS를 사용하여 [`sizes`](/docs/app/api-reference/components/image#sizes) 속성에 의해 페이지에서 미디어 쿼리 중단점과 일치하는 이미지의 부모 요소 공간을 제공하는 것을 고려해 보세요. `fill`, `contain`, 또는 `cover`와 함께, [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)와 [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)을 사용하여 이미지가 해당 공간을 차지하는 방식을 정의할 수도 있습니다.
 >
 > **이미지 표준화하기**
-> 
+>
 > 만약 제어할 수 있는 소스에서 이미지를 제공한다면, 이미지를 특정 크기로 표준화하는 이미지 파이프라인을 수정하는 것을 고려하세요.
 >
-> **API 호출 수정하기** 
+> **API 호출 수정하기**
 >
 > 만약 애플리케이션이 CMS와 같은 API 호출을 사용하여 이미지 URL을 받아오는 경우, URL과 함께 이미지 크기를 반환하도록 API 호출을 수정할 수 있습니다.
 

docs/02-app/01-building-your-application/05-optimizing/index.mdx

@@ -39,4 +39,4 @@ Next.js `/public` 폴더는 이미지, 글꼴 및 기타 파일과 같은 정적
 
 ## 분석 및 모니터링
 
-대규모 애플리케이션의 경우 Next.js는 인기있는 분석 및 모니터링 도구와 통합되어 애플리케이션의 성능을 이해하는 데 도움을 줍니다. <PagesOnly>[Analytics](/docs/app/building-your-application/optimizing/analytics), </PagesOnly> [OpenTelemetry](/docs/pages/building-your-application/optimizing/open-telemetry)<PagesOnly>,</PagesOnly> 및 [Instrumentation](/docs/pages/building-your-application/optimizing/instrumentation) 가이드에서 자세히 알아보세요.
+대규모 애플리케이션의 경우 Next.js는 인기있는 분석 및 모니터링 도구와 통합되어 애플리케이션의 성능을 이해하는 데 도움을 줍니다. <PagesOnly>[Analytics](/docs/app/building-your-application/optimizing/analytics), </PagesOnly> [OpenTelemetry](/docs/pages/building-your-application/optimizing/open-telemetry)<PagesOnly>,</PagesOnly> 및 [Instrumentation](/docs/pages/building-your-application/optimizing/instrumentation) 가이드에서 자세히 알아보세요.

docs/02-app/02-api-reference/04-functions/headers.mdx

@@ -1,9 +1,10 @@
 ---
-title : headers
-description : headers function에 대한 API 레퍼런스입니다.
+title: headers
+description: headers function에 대한 API 레퍼런스입니다.
 ---
 
 `headers` 함수는 [Server 컴포넌트](/docs/getting-started/react-essentials)에서 HTTP 수신 요청 헤더를 읽을 수 있는 기능을 제공합니다.
+
 ## `headers()`
 
 이 API는 [Web Headers API](https://developer.mozilla.org/en-US/docs/Web/API/Headers)에서 확장된 것입니다. 읽기 전용이며, 요청을 보낼 때 헤더를 설정/삭제할 수 없습니다.
@@ -34,7 +35,6 @@ export default function Page() {
 >
 > - `headers()`는 **[Dynamic Function](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-functions)** 으로, 반환되는 값은 미리 알 수 없습니다. 레이아웃이나 페이지에서 이를 사용하면 요청 시간에 **[동적으로 렌더링](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-rendering)** 됩니다.
 
-
 ### API 레퍼런스
 
 ```tsx
@@ -58,6 +58,7 @@ const headersList = headers()
 - [`Headers.values()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/values): `Headers` 객체에 포함된 key/value 쌍의 value를 순회하여 확인할 수 있는 [`이터레이터`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols)를 반환합니다.
 
 ### 예시
+
 #### Data fetching과 사용하기
 
 `headers()` can be used in combination with [Suspense for Data Fetching](/docs/app/building-your-application/data-fetching/fetching).
@@ -85,6 +86,6 @@ export default async function UserPage() {
 
 ## Version History
 
-| Version   | Changes               |
-| --------- | --------------------- |
-| `v13.0.0` | `headers` 안내. |
+| Version   | Changes         |
+| --------- | --------------- |
+| `v13.0.0` | `headers` 안내. |

docs/02-app/02-api-reference/05-next-config-js/generateBuildId.mdx

@@ -1,16 +1,16 @@
 ---
 title: generateBuildId
-description: Configure the build id, which is used to identify the current build in which your application is being served.
+description: 애플리케이션이 제공되고 있는 현재 빌드를 식별하는 데 사용되는 빌드 ID를 구성합니다.
 ---
 
-Next.js uses a constant id generated at build time to identify which version of your application is being served. This can cause problems in multi-server deployments when `next build` is run on every server. In order to keep a consistent build id between builds you can provide your own build id.
+Next.js는 빌드 시 생성된 상수 ID를 사용하여 제공 중인 애플리케이션의 버전을 식별합니다. 이로 인해 모든 서버에서 `next build`가 실행될 때 다중 서버 배포에서 문제가 발생할 수 있습니다. 빌드 간에 일관된 빌드 ID를 유지하기 위해 고유한 빌드 ID를 제공할 수 있습니다.
 
-Open `next.config.js` and add the `generateBuildId` function:
+`next.config.js`를 열고 `generateBuildId` 함수를 추가합니다.
 
 ```js filename="next.config.js"
 module.exports = {
   generateBuildId: async () => {
-    // You can, for example, get the latest git commit hash here
+    // 예를 들어 여기에서 최신 git 커밋 해시를 가져올 수 있습니다.
     return 'my-build-id'
   },
 }

docs/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx

@@ -5,30 +5,37 @@ source: app/building-your-application/styling/css-in-js
 ---
 
 <details>
-  <summary>예시</summary>
-
-- [Styled JSX](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx)
-- [Styled Components](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)
-- [Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion)
-- [Linaria](https://github.com/vercel/next.js/tree/canary/examples/with-linaria)
-- [Tailwind CSS + Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion)
-- [Styletron](https://github.com/vercel/next.js/tree/canary/examples/with-styletron)
-- [Cxs](https://github.com/vercel/next.js/tree/canary/examples/with-cxs)
-- [Aphrodite](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite)
-- [Fela](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite)
-- [Stitches](https://github.com/vercel/next.js/tree/canary/examples/with-stitches)
+  <summary>예시</summary>- [Styled
+  JSX](https://github.com/vercel/next.js/tree/canary/examples/with-styled-jsx) -
+  [Styled
+  Components](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components)
+  -
+  [Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-emotion)
+  -
+  [Linaria](https://github.com/vercel/next.js/tree/canary/examples/with-linaria)
+  - [Tailwind CSS +
+  Emotion](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss-emotion)
+  -
+  [Styletron](https://github.com/vercel/next.js/tree/canary/examples/with-styletron)
+  - [Cxs](https://github.com/vercel/next.js/tree/canary/examples/with-cxs) -
+  [Aphrodite](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite)
+  -
+  [Fela](https://github.com/vercel/next.js/tree/canary/examples/with-aphrodite)
+  -
+  [Stitches](https://github.com/vercel/next.js/tree/canary/examples/with-stitches)
 </details>
 
-Next.js에서 기존의 CSS-in-JS를 사용할 수 있습니다. 가장 간단한 방법은 인라인 스타일입니다. 
+Next.js에서 기존의 CSS-in-JS를 사용할 수 있습니다. 가장 간단한 방법은 인라인 스타일입니다.
 
 ```jsx
 function HiThere() {
   return <p style={{ color: 'red' }}>hi there</p>
 }
- 
+
 export default HiThere
 ```
-Next.js는 격리된 scope의 CSS를 지원하기 위해 [styled-jsx](https://github.com/vercel/styled-jsx)를 번들로 제공합니다. 목표는 [JS만을 지원하는](https://github.com/w3c/webcomponents/issues/71) Web 컴포넌트와 비슷한 "shadow CSS"를 지원하는 것입니다. 
+
+Next.js는 격리된 scope의 CSS를 지원하기 위해 [styled-jsx](https://github.com/vercel/styled-jsx)를 번들로 제공합니다. 목표는 [JS만을 지원하는](https://github.com/w3c/webcomponents/issues/71) Web 컴포넌트와 비슷한 "shadow CSS"를 지원하는 것입니다.
 
 다른 인기 있는 CSS-in-JS에 대해서는 위의 예시를 참고하세요
 (예시: Styled Components).
@@ -62,12 +69,12 @@ function HelloWorld() {
     </div>
   )
 }
- 
+
 export default HelloWorld
 ```
 
 더 많은 예제는 [styled-jsx 문서](https://github.com/vercel/styled-jsx)를 참고하세요.
 
-JavaScript 비활성화
--------------
-JavaScript를 비활성화하더라도 CSS는 프로덕션 빌드(`next start`)에 가져와집니다. 그러나 개발 중에는 빠른 새로고침으로 최고의 개발자 경험을 제공하기 위해 JavaScript를 활성화해야 합니다. 
+## JavaScript 비활성화
+
+JavaScript를 비활성화하더라도 CSS는 프로덕션 빌드(`next start`)에 가져와집니다. 그러나 개발 중에는 빠른 새로고침으로 최고의 개발자 경험을 제공하기 위해 JavaScript를 활성화해야 합니다.

readme.md

@@ -1 +1 @@
-packages/next/README.md
+packages/next/README.md