Merge branch 'luciancah:main' into custom-app

.all-contributorsrc

@@ -1,5 +1,7 @@
 {
-  "files": ["README.md"],
+  "files": [
+    "README.md"
+  ],
   "imageSize": 100,
   "commit": false,
   "commitType": "docs",
@@ -10,7 +12,36 @@
       "name": "Jinhyung Lee",
       "avatar_url": "https://avatars.githubusercontent.com/u/8311335?v=4",
       "profile": "https://blog.luciancah.com",
-      "contributions": ["doc"]
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "kmsu44",
+      "name": "MINSU KIM",
+      "avatar_url": "https://avatars.githubusercontent.com/u/45655623?v=4",
+      "profile": "https://github.com/kmsu44",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "4anghyeon",
+      "name": "sanghyeon",
+      "avatar_url": "https://avatars.githubusercontent.com/u/64076628?v=4",
+      "profile": "https://github.com/4anghyeon",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "hansololiviakim",
+      "name": "Hansol Olivia Kim",
+      "avatar_url": "https://avatars.githubusercontent.com/u/84097192?v=4",
+      "profile": "http://www.hansololiviakim.com",
+      "contributions": [
+        "content"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,14 +1,18 @@
-`PR를 작성하시기 전에 [기여 가이드[(https://nextjs-ko.org/contribution)을 먼저 확인해주세요.`
+<!-- PR를 작성하시기 전에 [기여 가이드[(https://nextjs-ko.org/contribution)을 먼저 확인해주세요. -->
+<!-- 이 문법으로 작성된 문장은 주석입니다. 문서의 모든 필드를 채워주세요! -->
 
 **컨트리뷰션 체크리스트**
 
-- [ ] 기여 가이드를 확인한 후 작성 하셨나요?
+- [ ] [기여 가이드](https://github.com/luciancah/nextjs-ko/blob/main/CONTRIBUTING.MD)를 확인한 후 작성 하셨나요?
+- [ ] [용어집](https://github.com/luciancah/nextjs-ko/issues/18)을 확인한 후 작성 하셨나요? 번역하신 단어 중 용어집에 추가하고싶은 단어가 있으시다면 이슈에 댓글로 남겨주세요.
 - [ ] title, description 등 마크다운 태그의 영문 원본 유지를 하셨나요?
-- [ ] 소제목 (h1~h6)의 영문 유지를 하셨나요?
+- [ ] 소제목 (h1~h6, ### ... 등)의 영문 유지를 하셨나요?
 - [ ] 문서의 전반적인 어조 톤과 일치하게 작성 하셨나요?
 - [ ] 코드블록 내부의 주석이나 업데이트 로그 등 표 내부의 문자도 한국어로 번역 하셨나요?
 
+
 **연관된 이슈 확인**
+<!-- closes #이슈번호 -->
 closes
 
 **기여 내용**
@@ -20,4 +24,4 @@ closes
 - [ ] 기타 기능 개선 및 수정
 
 **문서 경로**
-`e.g. /docs/getting-started/installation`
+<!-- 예시) /docs/getting-started/installation -->

.prettierignore

@@ -1,4 +1,16 @@
-origin/
+# gitignore 상속: prettier --ignore-path 패턴에서 아직 여러 파일을 받지 못하는 문제 있음
+
 node_modules/
+.github/
+.next/
+.husky/
+
+
+origin/
+public/
+.all-contributorsrc
+
+# 확장자
+*.yml
 *.yaml
-*.yml
+*.md

README.md

@@ -14,12 +14,6 @@
 
 ## 안녕하세요!
 
-<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-
-[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
-
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
 - [Next.js 문서](https://nextjs.org/docs)의 전체 한국어 번역을 목표로 합니다.
 - `nextjs.org` -> `nextjs-ko.org` 도메인 변경 만으로 한국어 문서의 동등한 접근을 목표로 합니다.
 
@@ -30,17 +24,10 @@
 
 [기여 안내서](https://github.com/luciancah/nextjs-ko/blob/main/CONTRIBUTING.MD)와 등록된 Issue를 확인해 주세요.
 
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
 ## Contributors ✨
 
+[![All Contributors](https://img.shields.io/github/all-contributors/luciancah/nextjs-ko?color=ee8449&style=flat-square)](#contributors)
+
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
@@ -50,6 +37,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   <tbody>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://blog.luciancah.com"><img src="https://avatars.githubusercontent.com/u/8311335?v=4?s=100" width="100px;" alt="Jinhyung Lee"/><br /><sub><b>Jinhyung Lee</b></sub></a><br /><a href="https://github.com/luciancah/nextjs-ko/commits?author=luciancah" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/kmsu44"><img src="https://avatars.githubusercontent.com/u/45655623?v=4?s=100" width="100px;" alt="MINSU KIM"/><br /><sub><b>MINSU KIM</b></sub></a><br /><a href="#content-kmsu44" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/4anghyeon"><img src="https://avatars.githubusercontent.com/u/64076628?v=4?s=100" width="100px;" alt="sanghyeon"/><br /><sub><b>sanghyeon</b></sub></a><br /><a href="#content-4anghyeon" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.hansololiviakim.com"><img src="https://avatars.githubusercontent.com/u/84097192?v=4?s=100" width="100px;" alt="Hansol Olivia Kim"/><br /><sub><b>Hansol Olivia Kim</b></sub></a><br /><a href="#content-hansololiviakim" title="Content">🖋</a></td>
     </tr>
   </tbody>
 </table>
@@ -59,5 +49,3 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
-[![All Contributors](https://img.shields.io/github/all-contributors/luciancah/nextjs-ko?color=ee8449&style=flat-square)](#contributors)

package.json

@@ -4,13 +4,15 @@
   "description": "nextjs 공식문서 한국어 번역",
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "NODE_ENV=production pnpm run generate-sitemap && next build",
+    "build:local": "pnpm run generate-sitemap && next build",
     "start": "next start",
     "lint": "next lint --cache",
     "format": "prettier --cache --check .",
-    "format:fix": "prettier --cache --write --log-level warn .",
+    "format:fix": "prettier --cache --write --log-level warn . --ignore-path .prettierignore",
     "prepare": "husky",
-    "lint-staged": "pnpm format:fix && pnpm lint"
+    "lint-staged": "pnpm format:fix && pnpm lint",
+    "generate-sitemap": "node scripts/generate-sitemap.mjs"
   },
   "repository": {
     "type": "git",
@@ -24,6 +26,8 @@
   "homepage": "https://github.com/nextjs-ko#readme",
   "dependencies": {
     "@next/third-parties": "^14.2.5",
+    "globby": "^14.0.2",
+    "gray-matter": "^4.0.3",
     "next": "^13.0.6",
     "next-themes": "^0.3.0",
     "nextra": "latest",

pages/_meta.json

@@ -1,7 +1,7 @@
 {
   "index": {
     "type": "page",
-    "title": "Next.js 공식문서 한국어 번역",
+    "title": "Next.js 공식 문서 한글/한국어 번역",
     "display": "hidden",
     "theme": {
       "layout": "article"

pages/docs/pages/building-your-application/configuring/babel.mdx

@@ -3,24 +3,22 @@ title: Babel
 description: Extend the babel preset added by Next.js with your own configs.
 ---
 
-{/* TODO: 번역이 필요합니다. */}
-
 # Babel
 
 <details>
-  <summary>Examples</summary>
+  <summary>예제</summary>
 
-- [Customizing babel configuration](https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config)
+- [Babel 구성 설정하기](https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config)
 
 </details>
 
-Next.js includes the `next/babel` preset to your app, which includes everything needed to compile React applications and server-side code. But if you want to extend the default Babel configs, it's also possible.
+Next.js는 앱에 `next/babel` 프리셋을 포함하고 있으며, 여기에는 React 애플리케이션과 서버 사이드 코드를 컴파일하는 데 필요한 모든 것이 포함되어 있습니다. 그러나 기본 Babel 구성을 확장하는 것도 가능합니다.
 
 ## Adding Presets and Plugins
 
-To start, you only need to define a `.babelrc` file (or `babel.config.js`) in the root directory of your project. If such a file is found, it will be considered as the _source of truth_, and therefore it needs to define what Next.js needs as well, which is the `next/babel` preset.
+시작하려면 프로젝트의 루트 디렉터리에 `.babelrc` 파일(또는 `babel.config.js`)을 정의하기만 하면 됩니다. 이러한 파일이 발견되면 *진실의 원천*으로 간주되므로 Next.js에 필요한 `next/babel` 프리셋도 정의해야 합니다.
 
-Here's an example `.babelrc` file:
+다음은 `.babelrc` 파일의 예입니다:
 
 ```json filename=".babelrc"
 {
@@ -29,9 +27,9 @@ Here's an example `.babelrc` file:
 }
 ```
 
-You can [take a look at this file](https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/preset.ts) to learn about the presets included by `next/babel`.
+`next/babel`에 포함된 프리셋에 대해 자세히 알아보려면 [이 파일](https://github.com/vercel/next.js/blob/canary/packages/next/src/build/babel/preset.ts)을 참조하십시오.
 
-To add presets/plugins **without configuring them**, you can do it this way:
+구성 없이 프리셋/플러그인을 추가하려면 다음과 같이 할 수 있습니다:
 
 ```json filename=".babelrc"
 {
@@ -42,7 +40,7 @@ To add presets/plugins **without configuring them**, you can do it this way:
 
 ## Customizing Presets and Plugins
 
-To add presets/plugins **with custom configuration**, do it on the `next/babel` preset like so:
+**사용자 정의 구성**을 사용하여 프리셋/플러그인을 추가하려면 다음과 같이 `next/babel` 프리셋에서 수행하십시오:
 
 ```json filename=".babelrc"
 {
@@ -61,9 +59,9 @@ To add presets/plugins **with custom configuration**, do it on the `next/babel`
 }
 ```
 
-To learn more about the available options for each config, visit babel's [documentation](https://babeljs.io/docs/) site.
+각 구성에 사용할 수 있는 옵션에 대해 자세히 알아보려면 Babel의 [문서](https://babeljs.io/docs/) 사이트를 방문하십시오.
 
-> **Good to know**:
+> **알아두면 좋은 점**:
 >
-> - Next.js uses the [**current** Node.js version](https://github.com/nodejs/release#release-schedule) for server-side compilations.
-> - The `modules` option on `"preset-env"` should be kept to `false`, otherwise webpack code splitting is turned off.
+> - Next.js는 서버 사이드 컴파일에 [**현재** Node.js 버전](https://github.com/nodejs/release#release-schedule)을 사용합니다.
+> - `"preset-env"`의 `modules` 옵션은 `false`로 유지해야 하며, 그렇지 않으면 webpack 코드 분할이 비활성화됩니다.

pages/docs/pages/building-your-application/rendering/client-side-rendering.mdx

@@ -14,16 +14,16 @@ related:
 
 # Client-side Rendering (CSR)
 
-In Client-Side Rendering (CSR) with React, the browser downloads a minimal HTML page and the JavaScript needed for the page. The JavaScript is then used to update the DOM and render the page. When the application is first loaded, the user may notice a slight delay before they can see the full page, this is because the page isn't fully rendered until all the JavaScript is downloaded, parsed, and executed.
+React를 사용한 클라이언트 사이드 렌더링 (CSR)에서는 브라우저가 최소한의 HTML 페이지와 페이지에 필요한 자바스크립트를 다운로드 합니다. 그 후 자바스크립트는 DOM을 업데이트하고 페이지를 렌더링하는 데 사용됩니다. 애플리케이션이 처음 로드될 때, 사용자가 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있습니다. 이는 모든 자바스크립트가 다운로드, 파싱 및 실행될 때까지 페이지가 완전하게 렌더링 되지 않기 때문입니다.
 
-After the page has been loaded for the first time, navigating to other pages on the same website is typically faster, as only necessary data needs to be fetched, and JavaScript can re-render parts of the page without requiring a full page refresh.
+페이지가 처음 로드된 후, 같은 웹사이트에서 다른 페이지로 이동할 때는 일반적으로 더 빠릅니다. 필요한 데이터만 가져오면 되고, 자바스크립트가 전체 페이지를 새로 고칠 필요 없이 페이지의 일부를 다시 렌더링할 수 있기 때문입니다.
 
-In Next.js, there are two ways you can implement client-side rendering:
+Next.js에서는 클라이언트 사이드 렌더링을 구현할 수 있는 두 가지 방법이 있습니다.
 
-1. Using React's `useEffect()` hook inside your pages instead of the server-side rendering methods ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) and [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)).
-2. Using a data fetching library like [SWR](https://swr.vercel.app/) or [TanStack Query](https://tanstack.com/query/latest/) to fetch data on the client (recommended).
+1. 서버 사이드 렌더링 메서드 ([`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props)와 [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)) 대신에 페이지 내부에서 리액트의 `useEffect()` 훅을 사용합니다.
+2. [SWR](https://swr.vercel.app/)이나 [TanStack Query](https://tanstack.com/query/latest/)와 같은 데이터 페칭 라이브러리를 사용하여 클라이언트에서 데이터를 가져옵니다 (권장됨).
 
-Here's an example of using `useEffect()` inside a Next.js page:
+다음은 Next.js 페이지 내부에서 `useEffect()`를 사용하는 예시입니다.
 
 ```jsx filename="pages/index.js"
 import React, { useState, useEffect } from 'react'
@@ -42,7 +42,7 @@ export function Page() {
     }
 
     fetchData().catch((e) => {
-      // handle the error as needed
+      // 필요에 따라 에러 처리
       console.error('An error occurred while fetching the data: ', e)
     })
   }, [])
@@ -51,9 +51,9 @@ export function Page() {
 }
 ```
 
-In the example above, the component starts by rendering `Loading...`. Then, once the data is fetched, it re-renders and displays the data.
+위 예시에서, 컴포넌트는 `Loading...`을 렌더링하며 시작합니다. 그런 다음 데이터가 불러와지면 다시 렌더링하여 데이터를 표시합니다.
 
-Although fetching data in a `useEffect` is a pattern you may see in older React Applications, we recommend using a data-fetching library for better performance, caching, optimistic updates, and more. Here's a minimum example using [SWR](https://swr.vercel.app/) to fetch data on the client:
+`useEffect`에서 데이터를 가져오는 것은 이전 React 애플리케이션에서 볼 수 있는 패턴이지만, 더 나은 성능, 캐싱, 낙관적 업데이트 등을 위해 데이터 페칭 라이브러리를 사용하는 것을 권장합니다. 다음은 클라이언트에서 데이터를 가져오기 위해 [SWR](https://swr.vercel.app/)을 사용하는 최소한의 예시입니다:
 
 ```jsx filename="pages/index.js"
 import useSWR from 'swr'
@@ -71,6 +71,6 @@ export function Page() {
 }
 ```
 
-> **Good to know**:
+> **알아두면 좋은 점**:
 >
-> Keep in mind that CSR can impact SEO. Some search engine crawlers might not execute JavaScript and therefore only see the initial empty or loading state of your application. It can also lead to performance issues for users with slower internet connections or devices, as they need to wait for all the JavaScript to load and run before they can see the full page. Next.js promotes a hybrid approach that allows you to use a combination of [server-side rendering](/docs/pages/building-your-application/rendering/server-side-rendering), [static site generation](/docs/pages/building-your-application/rendering/static-site-generation), and client-side rendering, **depending on the needs of each page** in your application. In the App Router, you can also use [Loading UI with Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming) to show a loading indicator while the page is being rendered.
+> 클라이언트 사이드 렌더링은 SEO에 영향을 줄 수 있음을 유념해야 합니다. 일부 검색 엔진 크롤러는 자바스크립트를 실행하지 않을 수 있기 때문에 애플리케이션의 초기 빈 상태 혹은 로딩 상태만 볼 수 있습니다. 또한 인터넷 연결이나 장치 속도가 느린 사용자들에게는 성능 문제를 일으킬 수 있는데, 전체 페이지를 볼 수 있기 전에 모든 자바스크립트가 로드되고 실행될 때까지 기다려야 하기 때문입니다. Next.js는 애플리케이션에서 **각 페이지의 필요에 따라** [서버 사이드 렌더링](/docs/pages/building-your-application/rendering/server-side-rendering), [정적 사이트 생성](/docs/pages/building-your-application/rendering/static-site-generation) 그리고 클라이언트 사이드 렌더링을 조합하여 사용할 수 있는 하이브리드 접근 방식을 권장합니다. App Router에서는 [Loading UI with Suspense](/docs/app/building-your-application/routing/loading-ui-and-streaming)를 사용하여 페이지가 렌더링 되는 동안 로딩 표시기를 표시할 수도 있습니다.