From 69e0faa33c1cd3f422d065d5d6b4df455bcd5a18 Mon Sep 17 00:00:00 2001
From: SNUPI <joohaem@daum.net>
Date: Fri, 23 Jun 2023 08:51:25 +0900
Subject: [PATCH 1/3] docs: reactStrictMode

---
 .../05-next-config-js/reactStrictMode.mdx              | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx b/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
index 35f422646..247870e98 100644
--- a/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
+++ b/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
@@ -1,13 +1,13 @@
 ---
 title: reactStrictMode
-description: The complete Next.js runtime is now Strict Mode-compliant, learn how to opt-in
+description: 완전한 Next.js 런타임은 이제 Strice Mode를 준수합니다. 옵트인(opt-in) 설정 방법에 대해 배웁니다.
 ---
 
-> **Suggested**: We strongly suggest you enable Strict Mode in your Next.js application to better prepare your application for the future of React.
+> **제안**: 향후 React에 대비할 수 있도록 Next.js 어플리케이션에서 Strict Mode를 활성화하는 것이 좋습니다.
 
-React's [Strict Mode](https://react.dev/reference/react/StrictMode) is a development mode only feature for highlighting potential problems in an application. It helps to identify unsafe lifecycles, legacy API usage, and a number of other features.
+React의 [Strict Mode](https://react.dev/reference/react/StrictMode)는 잠재적인 문제를 나타내기 위한 개발 모드 전용 기능입니다. 이는 안전하지 않은 라이프사이클, 레거시 API 사용 및 여러 기능을 식별하는 데에 도움을 줍니다.
 
-The Next.js runtime is Strict Mode-compliant. To opt-in to Strict Mode, configure the following option in your `next.config.js`:
+Next.js 런타임은 Strict Mode를 준수합니다. Strice Mode 옵트인(opt-in)을 위해 `next.config.js`에서 다음과 같이 설정합니다.
 
 ```js filename="next.config.js"
 module.exports = {
@@ -15,4 +15,4 @@ module.exports = {
 }
 ```
 
-If you or your team are not ready to use Strict Mode in your entire application, that's OK! You can incrementally migrate on a page-by-page basis using `<React.StrictMode>`.
+개인이나 팀이 전체 어플리케이션에 Strict Mode를 사용할 준비가 안되었어도 괜찮습니다! `<React.StrictMode>`를 사용하여 페이지 단위로 점진적 마이그레이션이 가능합니다.

From eeca1c70a801dd08b8ab412c484b0dde6ca7826c Mon Sep 17 00:00:00 2001
From: SNUPI <joohaem@daum.net>
Date: Fri, 23 Jun 2023 08:52:59 +0900
Subject: [PATCH 2/3] docs: reactStrictMode

---
 .../08-upgrading/01-codemods.mdx              | 112 +++++++++---------
 .../02-file-conventions/loading.mdx           |  22 ++--
 .../02-api-reference/04-functions/headers.mdx |  46 +++----
 .../05-next-config-js/reactStrictMode.mdx     |   4 +-
 .../01-routing/05-custom-document.mdx         |  37 +++---
 .../04-styling/03-css-in-js.mdx               |  70 ++++++++++-
 .../05-optimizing/07-analytics.mdx            |   4 +-
 7 files changed, 183 insertions(+), 112 deletions(-)

diff --git a/docs/02-app/01-building-your-application/08-upgrading/01-codemods.mdx b/docs/02-app/01-building-your-application/08-upgrading/01-codemods.mdx
index 63b457952..72d38e2db 100644
--- a/docs/02-app/01-building-your-application/08-upgrading/01-codemods.mdx
+++ b/docs/02-app/01-building-your-application/08-upgrading/01-codemods.mdx
@@ -1,32 +1,32 @@
 ---
 title: Codemods
-description: Use codemods to upgrade your Next.js codebase when new features are released.
+description: 새로운 기능이 출시되면 codemod를 사용해서 Next.js 코드베이스를 업그레이드하세요.
 ---
 
-Codemods are transformations that run on your codebase programmatically. This allows a large number of changes to be programmatically applied without having to manually go through every file.
+Codemod는 코드베이스에서 프로그래밍 방식으로 실행되는 변환입니다. 이렇게 하면 모든 파일을 수동으로 검토할 필요 없이 프로그래밍 방식으로 많은 변경 사항을 적용할 수 있습니다.
 
-Next.js provides Codemod transformations to help upgrade your Next.js codebase when an API is updated or deprecated.
+Next.js는 API가 업데이트되거나 더 이상 사용되지 않을 때 Next.js 코드베이스를 업그레이드하는 데 도움이 되는 Codemod 변환을 제공합니다.
 
-## Usage
+## 사용법
 
-In your terminal, navigate (`cd`) into your project's folder, then run:
+터미널에서 프로젝트 폴더로 이동(`cd`)한 후 다음을 실행합니다.
 
 ```bash filename="Terminal"
 npx @next/codemod <transform> <path>
 ```
 
-Replacing `<transform>` and `<path>` with appropriate values.
+`<transform>`과 `<path>`를 적절한 값으로 교체합니다.
 
-- `transform` - name of transform
-- `path` - files or directory to transform
-- `--dry` Do a dry-run, no code will be edited
-- `--print` Prints the changed output for comparison
+- `transform` - 변환명
+- `path` - 변환할 파일 또는 디렉토리
+- `--dry` 모의 테스트 실행, 코드가 편집되지 않음
+- `--print` 비교를 위해 변경된 아웃풋을 출력
 
 ## Next.js Codemods
 
 ### 13.2
 
-#### Use Built-in Font
+#### 내장 글꼴 사용
 
 ##### `built-in-next-font`
 
@@ -34,15 +34,15 @@ Replacing `<transform>` and `<path>` with appropriate values.
 npx @next/codemod@latest built-in-next-font .
 ```
 
-This codemod uninstalls the `@next/font` package and transforms `@next/font` imports into the built-in `next/font`.
+이 codemod는 `@next/font` package를 제거하고 `@next/font`가 내장된 `next/font`로 변환합니다.
 
-For example:
+예시:
 
 ```js
 import { Inter } from '@next/font/google'
 ```
 
-Transforms into:
+다음으로 변환:
 
 ```js
 import { Inter } from 'next/font/google'
@@ -50,7 +50,7 @@ import { Inter } from 'next/font/google'
 
 ### 13.0
 
-#### Rename Next Image Imports
+#### Next Image Imports 대체
 
 ##### `next-image-to-legacy-image`
 
@@ -58,9 +58,9 @@ import { Inter } from 'next/font/google'
 npx @next/codemod@latest next-image-to-legacy-image .
 ```
 
-Safely renames `next/image` imports in existing Next.js 10, 11, or 12 applications to `next/legacy/image` in Next.js 13. Also renames `next/future/image` to `next/image`.
+기존 Next.js 10, 11, 12 애플리케이션의 `next/image` import를 안전하게 Next.js 13의 `next/legacy/image`로 변경합니다. 또한 `next/future/image`를 `next/image`로 바꿉니다.
 
-For example:
+예시:
 
 ```jsx filename="pages/index.js"
 import Image1 from 'next/image'
@@ -76,12 +76,12 @@ export default function Home() {
 }
 ```
 
-Transforms into:
+다음으로 변환:
 
 ```jsx filename="pages/index.js"
-// 'next/image' becomes 'next/legacy/image'
+// 'next/image'를 'next/legacy/image'로 바꿉니다
 import Image1 from 'next/legacy/image'
-// 'next/future/image' becomes 'next/image'
+// 'next/future/image'를 'next/image'로 바꿉니다
 import Image2 from 'next/image'
 
 export default function Home() {
@@ -94,7 +94,7 @@ export default function Home() {
 }
 ```
 
-#### Migrate to the New Image Component
+#### 새 이미지 컴포넌트로 마이그레이션
 
 ##### `next-image-experimental`
 
@@ -102,15 +102,15 @@ export default function Home() {
 npx @next/codemod@latest next-image-experimental .
 ```
 
-Dangerously migrates from `next/legacy/image` to the new `next/image` by adding inline styles and removing unused props.
+인라인 스타일을 추가하고 사용하지 않는 props를 제거하여 `next/legacy/image`에서 `next/image`로 마이그레이션 하는 위험한 방법입니다.
 
-- Removes `layout` prop and adds `style`.
-- Removes `objectFit` prop and adds `style`.
-- Removes `objectPosition` prop and adds `style`.
-- Removes `lazyBoundary` prop.
-- Removes `lazyRoot` prop.
+- `layout` prop을 제거하고 `style`을 추가합니다.
+- `objectFit` prop을 제거하고 `style`을 추가합니다.
+- `objectPosition` prop을 제거하고 `style`을 추가합니다.
+- `lazyBoundary` prop을 제거합니다.
+- `lazyRoot` prop을 제거합니다.
 
-#### Remove `<a>` Tags From Link Components
+#### Link 컴포넌트에서 `<a>` 태그 제거
 
 ##### `new-link`
 
@@ -118,15 +118,15 @@ Dangerously migrates from `next/legacy/image` to the new `next/image` by adding
 npx @next/codemod@latest new-link .
 ```
 
-Remove `<a>` tags inside [Link Components](/docs/app/api-reference/components/link), or add a `legacyBehavior` prop to Links that cannot be auto-fixed.
+[Link 컴포넌트](/docs/app/api-reference/components/link)내부에서 `<a>` 태그를 제거하거나 자동으로 변환되지 않는 Link에 `legacyBehavior` prop을 추가합니다.
 
-For example:
+예시:
 
 ```jsx
 <Link href="/about">
   <a>About</a>
 </Link>
-// transforms into
+// 변환 결과
 <Link href="/about">
   About
 </Link>
@@ -134,13 +134,13 @@ For example:
 <Link href="/about">
   <a onClick={() => console.log('clicked')}>About</a>
 </Link>
-// transforms into
+// 변환 결과
 <Link href="/about" onClick={() => console.log('clicked')}>
   About
 </Link>
 ```
 
-In cases where auto-fixing can't be applied, the `legacyBehavior` prop is added. This allows your app to keep functioning using the old behavior for that particular link.
+자동으로 변환되지 않는 경우 `legacyBehavior` prop을 추가합니다. 이렇게 하면 앱이 해당 링크에 대한 이전 동작을 사용하여 계속 동작할 수 있습니다.
 
 ```jsx
 const Component = () => <a>About</a>
@@ -148,7 +148,7 @@ const Component = () => <a>About</a>
 <Link href="/about">
   <Component />
 </Link>
-// becomes
+// 추가
 <Link href="/about" legacyBehavior>
   <Component />
 </Link>
@@ -156,7 +156,7 @@ const Component = () => <a>About</a>
 
 ### 11
 
-#### Migrate from CRA
+#### CRA에서 마이그레이션
 
 ##### `cra-to-next`
 
@@ -164,13 +164,13 @@ const Component = () => <a>About</a>
 npx @next/codemod cra-to-next
 ```
 
-Migrates a Create React App project to Next.js; creating a Pages Router and necessary config to match behavior. Client-side only rendering is leveraged initially to prevent breaking compatibility due to `window` usage during SSR and can be enabled seamlessly to allow the gradual adoption of Next.js specific features.
+Create React App 프로젝트를 Next.js로 마이그레이션 합니다. 동작을 일치시키기 위해 페이지 라우터와 필요한 설정을 만듭니다. 클라이언트 전용 렌더링은 SSR 중 `window` 사용으로 인한 호환성 손상을 방지하기 위해 초기에 사용되며 Next.js의 특정 기능을 점진적으로 채택할 수 있도록 원활하게 활성화할 수 있습니다.
 
-Please share any feedback related to this transform [in this discussion](https://github.com/vercel/next.js/discussions/25858).
+[이 토론](https://github.com/vercel/next.js/discussions/25858)에서 변환과 관련된 피드백을 공유하세요.
 
 ### 10
 
-#### Add React imports
+#### React imports 추가
 
 ##### `add-missing-react-import`
 
@@ -178,9 +178,9 @@ Please share any feedback related to this transform [in this discussion](https:/
 npx @next/codemod add-missing-react-import
 ```
 
-Transforms files that do not import `React` to include the import in order for the new [React JSX transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) to work.
+[새로운 React JSX 변환](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)을 위해 `React`를 import하지 않은 파일에 import를 포함하도록 변환합니다.
 
-For example:
+예시:
 
 ```jsx filename="my-component.js"
 export default class Home extends React.Component {
@@ -190,7 +190,7 @@ export default class Home extends React.Component {
 }
 ```
 
-Transforms into:
+다음으로 변환:
 
 ```jsx filename="my-component.js"
 import React from 'react'
@@ -203,7 +203,7 @@ export default class Home extends React.Component {
 
 ### 9
 
-#### Transform Anonymous Components into Named Components
+#### 익명 컴포넌트를 기명 컴포넌트로 변환
 
 ##### `name-default-component`
 
@@ -211,11 +211,11 @@ export default class Home extends React.Component {
 npx @next/codemod name-default-component
 ```
 
-**Versions 9 and above.**
+**버전 9 이상**
 
-Transforms anonymous components into named components to make sure they work with [Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh).
+익명 컴포넌트를 기명 컴포넌트로 변환하여 [Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh)가 같이 동작하는지 확인합니다.
 
-For example:
+예시:
 
 ```jsx filename="my-component.js"
 export default function () {
@@ -223,7 +223,7 @@ export default function () {
 }
 ```
 
-Transforms into:
+다음으로 변환:
 
 ```jsx filename="my-component.js"
 export default function MyComponent() {
@@ -231,11 +231,11 @@ export default function MyComponent() {
 }
 ```
 
-The component will have a camel-cased name based on the name of the file, and it also works with arrow functions.
+컴포넌트는 파일 이름을 기준으로 캐멀 케이스로 구분되며 화살표 함수로도 동작합니다.
 
 ### 8
 
-#### Transform AMP HOC into page config
+#### AMP 고차 컴포넌트를 페이지 설정으로 변환
 
 ##### `withamp-to-config`
 
@@ -243,12 +243,12 @@ The component will have a camel-cased name based on the name of the file, and it
 npx @next/codemod withamp-to-config
 ```
 
-Transforms the `withAmp` HOC into Next.js 9 page configuration.
+`withAmp` 고차 컴포넌트를 Next.js 9 페이지 설정으로 변환합니다.
 
-For example:
+예시:
 
 ```js
-// Before
+// 이전
 import { withAmp } from 'next/amp'
 
 function Home() {
@@ -259,7 +259,7 @@ export default withAmp(Home)
 ```
 
 ```js
-// After
+// 이후
 export default function Home() {
   return <h1>My AMP Page</h1>
 }
@@ -271,7 +271,7 @@ export const config = {
 
 ### 6
 
-#### Use `withRouter`
+#### `withRouter` 사용
 
 ##### `url-to-withrouter`
 
@@ -279,9 +279,9 @@ export const config = {
 npx @next/codemod url-to-withrouter
 ```
 
-Transforms the deprecated automatically injected `url` property on top level pages to using `withRouter` and the `router` property it injects. Read more here: [https://nextjs.org/docs/messages/url-deprecated](/docs/messages/url-deprecated)
+최상위 페이지에서 더 이상 사용되지 않는 자동 주입 `url` 프로퍼티를 `withRouter`와 `withRouter`가 주입하는 `router` 프로퍼티를 사용하도록 변환합니다. 여기에서 더 읽기: [https://nextjs.org/docs/messages/url-deprecated](/docs/messages/url-deprecated)
 
-For example:
+예시:
 
 ```js filename="From"
 import React from 'react'
@@ -306,4 +306,4 @@ export default withRouter(
 )
 ```
 
-This is one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter).
+이것은 하나의 사례입니다. 변환(및 테스트)되는 모든 사례는 [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter)에서 찾을 수 있습니다.
diff --git a/docs/02-app/02-api-reference/02-file-conventions/loading.mdx b/docs/02-app/02-api-reference/02-file-conventions/loading.mdx
index 8b9224aba..191e97592 100644
--- a/docs/02-app/02-api-reference/02-file-conventions/loading.mdx
+++ b/docs/02-app/02-api-reference/02-file-conventions/loading.mdx
@@ -1,34 +1,34 @@
 ---
 title: loading.js
-description: API reference for the loading.js  file.
+description: loading.js 파일에 대한 API 레퍼런스입니다.
 ---
 
-A **loading** file can create instant loading states built on [Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming).
+**loading** 파일은 [Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming)를 기반으로 로딩 상태를 정의할 수 있습니다.
 
-By default, this file is a [Server Component](/docs/getting-started/react-essentials#server-components) - but can also be used as a Client Component through the `"use client"` directive.
+기본적으로 이 파일은 [Server 컴포넌트](/docs/getting-started/react-essentials#server-components)이지만, `"use client"` 지시문을 통해 Client 컴포넌트로도 사용할 수 있습니다.
 
 ```tsx filename="app/feed/loading.tsx" switcher
 export default function Loading() {
-  // Or a custom loading skeleton component
+  // 또는 커스텀 로딩 스켈레톤 컴포넌트
   return <p>'Loading...'</p>
 }
 ```
 
 ```jsx filename="app/feed/loading.js" switcher
 export default function Loading() {
-  // Or a custom loading skeleton component
+  // 또는 커스텀 로딩 스켈레톤 컴포넌트
   return <p>'Loading...'</p>
 }
 ```
 
-Loading UI components do not accept any parameters.
+로딩 UI 컴포넌트는 매개변수를 받지 않습니다.
 
-> **Good to know**
+> **참고**
 >
-> - While designing loading UI, you may find it helpful to use the [React Developer Tools](https://react.dev/learn/react-developer-tools) to manually toggle Suspense boundaries.
+> - loading UI를 디자인할 때, [React Developer Tools](https://react.dev/learn/react-developer-tools)를 사용해 Suspense boundary를 수동으로 토글하는 것이 도움이 될 수 있습니다.
 
 ## Version History
 
-| Version   | Changes               |
-| --------- | --------------------- |
-| `v13.0.0` | `loading` introduced. |
+| Version   | Changes        |
+| --------- | -------------- |
+| `v13.0.0` | `loading` 도입 |
diff --git a/docs/02-app/02-api-reference/04-functions/headers.mdx b/docs/02-app/02-api-reference/04-functions/headers.mdx
index 334f8570f..3a1e21b0c 100644
--- a/docs/02-app/02-api-reference/04-functions/headers.mdx
+++ b/docs/02-app/02-api-reference/04-functions/headers.mdx
@@ -1,13 +1,12 @@
 ---
-title: headers
-description: API reference for the headers function.
+title : headers
+description : headers function에 대한 API 레퍼런스입니다.
 ---
 
-The `headers` function allows you to read the HTTP incoming request headers from a [Server Component](/docs/getting-started/react-essentials).
-
+`headers` 함수는 [Server 컴포넌트](/docs/getting-started/react-essentials)에서 HTTP 수신 요청 헤더를 읽을 수 있는 기능을 제공합니다.
 ## `headers()`
 
-This API extends the [Web Headers API](https://developer.mozilla.org/en-US/docs/Web/API/Headers). It is **read-only**, meaning you cannot `set` / `delete` the outgoing request headers.
+이 API는 [Web Headers API](https://developer.mozilla.org/en-US/docs/Web/API/Headers)에서 확장된 것입니다. 읽기 전용이며, 요청을 보낼 때 헤더를 설정/삭제할 수 없습니다.
 
 ```tsx filename="app/page.tsx" switcher
 import { headers } from 'next/headers'
@@ -31,44 +30,47 @@ export default function Page() {
 }
 ```
 
-> **Good to know**:
+> **참고**:
 >
-> - `headers()` is a **[Dynamic Function](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-functions)** whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into **[dynamic rendering](/docs/app/building-your-application/rendering/static-and-dynamic-rendering#dynamic-rendering)** at request time.
+> - `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 Reference
+### API 레퍼런스
 
 ```tsx
 const headersList = headers()
 ```
 
-#### Parameters
+#### 파라미터
 
-`headers` does not take any parameters.
+`headers`는 어떤 파라미터도 받지 않습니다.
 
-#### Returns
+#### 반환값
 
-`headers` returns a **read-only** [Web Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers) object.
+`headers`는 읽기 전용인 [Web Headers](https://developer.mozilla.org/en-US/docs/Web/API/Headers) 객체를 반환합니다.
 
-- [`Headers.entries()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/entries): Returns an [`iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) allowing to go through all key/value pairs contained in this object.
-- [`Headers.forEach()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/forEach): Executes a provided function once for each key/value pair in this `Headers` object.
-- [`Headers.get()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/get): Returns a [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) sequence of all the values of a header within a `Headers` object with a given name.
-- [`Headers.has()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/has): Returns a boolean stating whether a `Headers` object contains a certain header.
-- [`Headers.keys()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/keys): Returns an [`iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all keys of the key/value pairs contained in this object.
-- [`Headers.values()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/values): Returns an [`iterator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all values of the key/value pairs contained in this object.
+- [`Headers.entries()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/entries): 모든 키/값 쌍을 순회하여 확인할 수 있는 [`이터레이터`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols)를 반환합니다.
+- [`Headers.forEach()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/forEach): `Headers` 객체의 키/값 쌍에 대해 제공된 함수를 한 번씩 실행합니다.
+- [`Headers.get()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/get): 주어진 이름과 일치하는 `Headers` 객체 내 헤더의 모든 값을 [`문자열`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String) 시퀀스로 반환합니다.
 
-### Examples
+- [`Headers.has()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/has): `Headers` 객체가 특정 헤더를 포함하고 있는지를 나타내는 boolean 값을 반환합니다.
+- [`Headers.keys()`](https://developer.mozilla.org/en-US/docs/Web/API/Headers/keys): `Headers` 객체에 포함된 key/value 쌍의 key를 순회하여 확인할 수 있는 [`이터레이터`](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols)를 반환합니다.
+- [`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)를 반환합니다.
 
-#### Usage with Data Fetching
+### 예시
+#### Data fetching과 사용하기
 
 `headers()` can be used in combination with [Suspense for Data Fetching](/docs/app/building-your-application/data-fetching/fetching).
 
+`headers()`는 [Data Fetching에 대한 Suspense](/docs/app/building-your-application/data-fetching/fetching)와 결합하여 사용할 수 있습니다.
+
 ```jsx filename="app/page.js"
 import { headers } from 'next/headers'
 
 async function getUser() {
   const headersInstance = headers()
   const authorization = headersInstance.get('authorization')
-  // Forward the authorization header
+  // authorization 헤더를 전달하세요.
   const res = await fetch('...', {
     headers: { authorization },
   })
@@ -85,4 +87,4 @@ export default async function UserPage() {
 
 | Version   | Changes               |
 | --------- | --------------------- |
-| `v13.0.0` | `headers` introduced. |
+| `v13.0.0` | `headers` 안내. |
\ No newline at end of file
diff --git a/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx b/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
index 247870e98..8be12db7e 100644
--- a/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
+++ b/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
@@ -3,7 +3,7 @@ title: reactStrictMode
 description: 완전한 Next.js 런타임은 이제 Strice Mode를 준수합니다. 옵트인(opt-in) 설정 방법에 대해 배웁니다.
 ---
 
-> **제안**: 향후 React에 대비할 수 있도록 Next.js 어플리케이션에서 Strict Mode를 활성화하는 것이 좋습니다.
+> **제안**: 향후 React에 대비할 수 있도록 Next.js 애플리케이션에서 Strict Mode를 활성화하는 것이 좋습니다.
 
 React의 [Strict Mode](https://react.dev/reference/react/StrictMode)는 잠재적인 문제를 나타내기 위한 개발 모드 전용 기능입니다. 이는 안전하지 않은 라이프사이클, 레거시 API 사용 및 여러 기능을 식별하는 데에 도움을 줍니다.
 
@@ -15,4 +15,4 @@ module.exports = {
 }
 ```
 
-개인이나 팀이 전체 어플리케이션에 Strict Mode를 사용할 준비가 안되었어도 괜찮습니다! `<React.StrictMode>`를 사용하여 페이지 단위로 점진적 마이그레이션이 가능합니다.
+개인이나 팀이 전체 애플리케이션에 Strict Mode를 사용할 준비가 안되었어도 괜찮습니다! `<React.StrictMode>`를 사용하여 페이지 단위로 점진적 마이그레이션이 가능합니다.
diff --git a/docs/03-pages/01-building-your-application/01-routing/05-custom-document.mdx b/docs/03-pages/01-building-your-application/01-routing/05-custom-document.mdx
index b7d8792cd..9fb0fb99a 100644
--- a/docs/03-pages/01-building-your-application/01-routing/05-custom-document.mdx
+++ b/docs/03-pages/01-building-your-application/01-routing/05-custom-document.mdx
@@ -1,11 +1,11 @@
 ---
-title: Custom Document
-description: Extend the default document markup added by Next.js.
+title: 커스텀 Document
+description: Next.js의 기본 문서 마크업을 확장합니다.
 ---
 
-A custom `Document` can update the `<html>` and `<body>` tags used to render a [Page](/docs/pages/building-your-application/routing/pages-and-layouts). This file is only rendered on the server, so event handlers like `onClick` cannot be used in `_document`.
+커스텀 Document는 [페이지](/docs/pages/building-your-application/routing/pages-and-layouts)를 렌더링할 때 사용되는 `<html>` 및 `<body>`태그를 업데이트할 수 있습니다. 이 파일은 서버에서만 렌더링 되므로 `_document`에서는 onClick과 같은 이벤트 핸들러를 사용할 수 없습니다.
 
-To override the default `Document`, create the file `pages/_document.js` as shown below:
+기본 Document를 덮어쓰려면 아래와 같이 `pages/_document.js` 파일을 생성하십시오:
 
 ```jsx
 import { Html, Head, Main, NextScript } from 'next/document'
@@ -23,33 +23,36 @@ export default function Document() {
 }
 ```
 
-The code above is the default `Document` added by Next.js. Custom attributes are allowed as props. For example, we might want to add `lang="en"` to the `<html>` tag:
+위의 코드는 Next.js의 기본 Document입니다. 커스텀 속성은 props를 통해 전달할 수 있습니다. 예를 들어, `<html>` 태그에 `lang="en"`을 추가할 수 있습니다:
 
 ```jsx
 <Html lang="en">
 ```
 
-Or add a `className` to the `body` tag:
+또는 `body` 태그에 `className`을 추가할 수 있습니다:
 
 ```jsx
 <body className="bg-white">
 ```
 
-`<Html>`, `<Head />`, `<Main />` and `<NextScript />` are required for the page to be properly rendered.
+`<Html>`, `<Head />`,` <Main />`, `<NextScript />`은 페이지가 올바르게 렌더링 되기 위해 필요합니다.
 
-## Caveats
+## 주의사항
 
-- The `<Head />` component used in `_document` is not the same as [`next/head`](/docs/pages/api-reference/components/head). The `<Head />` component used here should only be used for any `<head>` code that is common for all pages. For all other cases, such as `<title>` tags, we recommend using [`next/head`](/docs/pages/api-reference/components/head) in your pages or components.
-- React components outside of `<Main />` will not be initialized by the browser. Do _not_ add application logic here or custom CSS (like `styled-jsx`). If you need shared components in all your pages (like a menu or a toolbar), read [Layouts](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern) instead.
-- `Document` currently does not support Next.js [Data Fetching methods](/docs/pages/building-your-application/data-fetching) like [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) or [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props).
+- `_document`에서 사용된 `<Head />` 컴포넌트는 [`next/head`](/docs/pages/api-reference/components/head)와 다릅니다. 여기에서 사용된 `<Head />` 컴포넌트는 모든 페이지에 공통인 `<head>` 코드로써만 사용되어야 합니다. 다른 경우에는 [`next/head`](/docs/pages/api-reference/components/head)를 페이지나 컴포넌트에서 사용하는 것이 좋습니다.
+- `<Main />` 바깥의 React 컴포넌트는 브라우저에서 초기화되지 않습니다. 여기에
+  애플리케이션 로직이나 사용자 지정 CSS(예: `styled-jsx`)를 추가하지 마십시오.
+  모든 페이지에서 공유되는 컴포넌트(메뉴나 툴바와 같은)가 필요한 경우 [레이아웃](/docs/pages/building-your-application/routing/pages-and-layouts#layout-pattern)을
+  참조하십시오.
+- `Document`는 현재 Next.js의 [데이터 패칭 방법](/docs/pages/building-your-application/data-fetching)인 [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) 또는 [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)을 지원하지 않습니다.
 
-## Customizing `renderPage`
+## `renderPage` 커스터마이징
 
-> **Good to know**: This is advanced and only needed for libraries like CSS-in-JS to support server-side rendering. This is not needed for built-in `styled-jsx` support.
+> **참고**: 이는 CSS-in-JS와 같은 라이브러리가 서버 측 렌더링을 지원하기 위해 필요한 고급 기능으로, 내장된 `styled-jsx` 지원에는 필요하지 않습니다.
 
-For [React 18](/docs/getting-started/react-essentials) support, we recommend avoiding customizing `getInitialProps` and `renderPage`, if possible.
+[React 18](/docs/getting-started/react-essentials) 지원을 위해, 가능하다면 `getInitialProps`와 `renderPage`을 커스터마이징 하지 않는것을 추천합니다.
 
-The `ctx` object shown below is equivalent to the one received in [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props#context-object), with the addition of `renderPage`.
+아래에 표시된 `ctx` 객체는 [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props#context-object)에서 받는 객체와 동일하며, `renderPage`가 추가된 것입니다.
 
 ```jsx
 import Document, { Html, Head, Main, NextScript } from 'next/document'
@@ -89,11 +92,11 @@ class MyDocument extends Document {
 export default MyDocument
 ```
 
-> **Good to know**: `getInitialProps` in `_document` is not called during client-side transitions.
+> **참고**: `_document`의 `getInitialProps`는 클라이언트 측 전환 중에 호출되지 않습니다.
 
 ## TypeScript
 
-You can use the built-in `DocumentContext` type and change the file name to `./pages/_document.tsx` like so:
+내장된 `DocumentContext` 타입을 사용해서 파일 이름을 `./pages/_document.tsx`로 변경할 수 있습니다. 아래의 예시를 참조하세요:
 
 ```tsx
 import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
diff --git a/docs/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx b/docs/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx
index ab065b656..a939612f4 100644
--- a/docs/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx
+++ b/docs/03-pages/01-building-your-application/04-styling/03-css-in-js.mdx
@@ -1,7 +1,73 @@
 ---
 title: CSS-in-JS
-description: Use CSS-in-JS libraries with Next.js
+description: Next.js에서 CSS-in-JS 사용하기
 source: app/building-your-application/styling/css-in-js
 ---
 
-{/* DO NOT EDIT. The content of this doc is generated from the source above. To edit the content of this page, navigate to the source page in your editor. You can use the `<PagesOnly>Content</PageOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}
+<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)
+</details>
+
+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"를 지원하는 것입니다. 
+
+다른 인기 있는 CSS-in-JS에 대해서는 위의 예시를 참고하세요
+(예시: Styled Components).
+
+`styled-jsx`를 사용하는 컴포넌트는 다음과 같습니다.
+
+```jsx
+function HelloWorld() {
+  return (
+    <div>
+      Hello world
+      <p>scoped!</p>
+      <style jsx>{`
+        p {
+          color: blue;
+        }
+        div {
+          background: red;
+        }
+        @media (max-width: 600px) {
+          div {
+            background: blue;
+          }
+        }
+      `}</style>
+      <style global jsx>{`
+        body {
+          background: black;
+        }
+      `}</style>
+    </div>
+  )
+}
+ 
+export default HelloWorld
+```
+
+더 많은 예제는 [styled-jsx 문서](https://github.com/vercel/styled-jsx)를 참고하세요.
+
+JavaScript 비활성화
+-------------
+JavaScript를 비활성화하더라도 CSS는 프로덕션 빌드(`next start`)에 가져와집니다. 그러나 개발 중에는 빠른 새로고침으로 최고의 개발자 경험을 제공하기 위해 JavaScript를 활성화해야 합니다. 
\ No newline at end of file
diff --git a/docs/03-pages/01-building-your-application/05-optimizing/07-analytics.mdx b/docs/03-pages/01-building-your-application/05-optimizing/07-analytics.mdx
index 5e08847c9..5e12b7dc8 100644
--- a/docs/03-pages/01-building-your-application/05-optimizing/07-analytics.mdx
+++ b/docs/03-pages/01-building-your-application/05-optimizing/07-analytics.mdx
@@ -1,6 +1,6 @@
 ---
-title: Analytics
-description: Measure and track page performance using Next.js Speed Insights
+title: 분석
+description: Next.js Speed Insights를 사용하여 페이지 성능을 측정 및 추적하세요.
 source: app/building-your-application/optimizing/analytics
 ---
 

From a2249086e658dede0332d8c423db0b071442dc55 Mon Sep 17 00:00:00 2001
From: SNUPI <joohaem@daum.net>
Date: Sat, 1 Jul 2023 12:54:03 +0900
Subject: [PATCH 3/3] =?UTF-8?q?docs:=20reactStrictMode=20=EB=A7=9E?=
 =?UTF-8?q?=EC=B6=A4=EB=B2=95=20=EA=B2=80=EC=82=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../02-api-reference/05-next-config-js/reactStrictMode.mdx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx b/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
index 8be12db7e..19927f3b5 100644
--- a/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
+++ b/docs/02-app/02-api-reference/05-next-config-js/reactStrictMode.mdx
@@ -1,13 +1,13 @@
 ---
 title: reactStrictMode
-description: 완전한 Next.js 런타임은 이제 Strice Mode를 준수합니다. 옵트인(opt-in) 설정 방법에 대해 배웁니다.
+description: 완전한 Next.js 런타임은 이제 Strict Mode를 준수합니다. 옵트인(opt-in) 설정 방법에 대해 배웁니다.
 ---
 
 > **제안**: 향후 React에 대비할 수 있도록 Next.js 애플리케이션에서 Strict Mode를 활성화하는 것이 좋습니다.
 
 React의 [Strict Mode](https://react.dev/reference/react/StrictMode)는 잠재적인 문제를 나타내기 위한 개발 모드 전용 기능입니다. 이는 안전하지 않은 라이프사이클, 레거시 API 사용 및 여러 기능을 식별하는 데에 도움을 줍니다.
 
-Next.js 런타임은 Strict Mode를 준수합니다. Strice Mode 옵트인(opt-in)을 위해 `next.config.js`에서 다음과 같이 설정합니다.
+Next.js 런타임은 Strict Mode를 준수합니다. Strict Mode 옵트인(opt-in)을 위해 `next.config.js`에서 다음과 같이 설정합니다.
 
 ```js filename="next.config.js"
 module.exports = {
@@ -15,4 +15,4 @@ module.exports = {
 }
 ```
 
-개인이나 팀이 전체 애플리케이션에 Strict Mode를 사용할 준비가 안되었어도 괜찮습니다! `<React.StrictMode>`를 사용하여 페이지 단위로 점진적 마이그레이션이 가능합니다.
+개인이나 팀이 전체 애플리케이션에 Strict Mode를 사용할 준비가 안 되었어도 괜찮습니다! `<React.StrictMode>`를 사용하여 페이지 단위로 점진적 마이그레이션이 가능합니다.