diff --git a/pages/docs/pages/building-your-application/routing/custom-document.mdx b/pages/docs/pages/building-your-application/routing/custom-document.mdx index 7de7b32..fb88a42 100644 --- a/pages/docs/pages/building-your-application/routing/custom-document.mdx +++ b/pages/docs/pages/building-your-application/routing/custom-document.mdx @@ -3,13 +3,11 @@ title: Custom Document description: Extend the default document markup added by Next.js. --- -{/* TODO: 번역이 필요합니다. */} - # Custom Document -A custom `Document` can update the `` and `` tags used to render a [Page](/docs/pages/building-your-application/routing/pages-and-layouts). +사용자 정의 `Document`는 [페이지](/docs/pages/building-your-application/routing/pages-and-layouts)를 렌더링하는 데 사용되는 `` 및 `` 태그를 업데이트할 수 있습니다. -To override the default `Document`, create the file `pages/_document` as shown below: +기본 `Document`를 오버라이드 하려면 아래와 같이 `pages/_document` 파일을 생성하세요. ```tsx filename="pages/_document.tsx" switcher import { Html, Head, Main, NextScript } from 'next/document' @@ -43,22 +41,22 @@ export default function Document() { } ``` -> **Good to know** +> **알아두면 유용한 정보** > -> - `_document` is only rendered on the server, so event handlers like `onClick` cannot be used in this file. -> - ``, ``, `
` and `` are required for the page to be properly rendered. +> - `_document`는 서버에서만 렌더링되므로, 이 파일에서는 `onClick`과 같은 이벤트 핸들러를 사용할 수 없습니다. +> - 페이지가 제대로 렌더링되려면 ``, ``, `
` 및 ``가 필요합니다. ## Caveats -- The `` component used in `_document` is not the same as [`next/head`](/docs/pages/api-reference/components/head). The `` component used here should only be used for any `` code that is common for all pages. For all other cases, such as `` 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>` 코드에만 사용해야 합니다. `<title>` 태그와 같은 다른 모든 경우에는 페이지 또는 컴포넌트에서 [`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`는 현재 [`getStaticProps`](/docs/pages/building-your-application/data-fetching/get-static-props) 또는 [`getServerSideProps`](/docs/pages/building-your-application/data-fetching/get-server-side-props)와 같은 Next.js [데이터 패칭 메서드](/docs/pages/building-your-application/data-fetching)를 지원하지 않습니다. ## Customizing `renderPage` -Customizing `renderPage` 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. +`renderPage` 커스터마이징은 고급 기술이며 서버 사이드 렌더링을 지원하기 위해 CSS-in-JS와 같은 라이브러리에서만 필요합니다. 내장된 `styled-jsx` 지원에는 필요하지 않습니다. -**We do not recommend using this pattern.** Instead, consider [incrementally adopting](/docs/app/building-your-application/upgrading/app-router-migration) the App Router, which allows you to more easily fetch data for [pages and layouts](/docs/app/building-your-application/routing/layouts-and-templates). +**이 패턴을 사용하지 않는 것이 좋습니다.** 대신 [페이지와 레이아웃](/docs/app/building-your-application/routing/layouts-and-templates)에 대한 데이터를 더 쉽게 가져올 수 있는 App Router를 [점진적으로 도입](/docs/app/building-your-application/upgrading/app-router-migration)하는 것을 고려하세요. ```tsx filename="pages/_document.tsx" switcher import Document, { @@ -76,16 +74,16 @@ class MyDocument extends Document { ): Promise<DocumentInitialProps> { const originalRenderPage = ctx.renderPage - // Run the React rendering logic synchronously + // React 렌더링 로직을 동기적으로 실행합니다. ctx.renderPage = () => originalRenderPage({ - // Useful for wrapping the whole react tree + // 전체 React 트리를 래핑하는 데 유용합니다. enhanceApp: (App) => App, - // Useful for wrapping in a per-page basis + // 페이지별로 래핑하는 데 유용합니다. enhanceComponent: (Component) => Component, }) - // Run the parent `getInitialProps`, it now includes the custom `renderPage` + // 부모의 `getInitialProps`를 실행하며, 이제 커스텀 `renderPage`가 포함됩니다. const initialProps = await Document.getInitialProps(ctx) return initialProps @@ -114,16 +112,16 @@ class MyDocument extends Document { static async getInitialProps(ctx) { const originalRenderPage = ctx.renderPage - // Run the React rendering logic synchronously + // React 렌더링 로직을 동기적으로 실행합니다. ctx.renderPage = () => originalRenderPage({ - // Useful for wrapping the whole react tree + // 전체 React 트리를 래핑하는 데 유용합니다. enhanceApp: (App) => App, - // Useful for wrapping in a per-page basis + // 페이지별로 래핑하는 데 유용합니다. enhanceComponent: (Component) => Component, }) - // Run the parent `getInitialProps`, it now includes the custom `renderPage` + // 부모의 `getInitialProps`를 실행하며, 이제 커스텀 `renderPage`가 포함됩니다. const initialProps = await Document.getInitialProps(ctx) return initialProps @@ -145,7 +143,7 @@ class MyDocument extends Document { export default MyDocument ``` -> **Good to know** +> **알아두면 유용한 정보** > -> - `getInitialProps` in `_document` is not called during client-side transitions. -> - The `ctx` object for `_document` is equivalent to the one received in [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props#context-object), with the addition of `renderPage`. +> - `_document`의 `getInitialProps`는 클라이언트 측 전환 중에는 호출되지 않습니다. +> - `_document`의 `ctx` 객체는 [`getInitialProps`](/docs/pages/api-reference/functions/get-initial-props#context-object)에서 받은 것과 동일하며, `renderPage`가 추가되어 있습니다.