Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#73] docs: custom-document 번역 #74

Merged
merged 2 commits into from
Aug 5, 2024
Merged

[#73] docs: custom-document 번역 #74

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc2d5d2
[#73] docs: custom-document 번역
yoonncho Jul 31, 2024
81f46f2
[#73] docs: 코드 내 주석 번역
yoonncho Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 21 additions & 23 deletions pages/docs/pages/building-your-application/routing/custom-document.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<html>` and `<body>` 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)를 렌더링하는 데 사용되는 `<html>` 및 `<body>` 태그를 업데이트할 수 있습니다.

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'
Expand Down Expand Up @@ -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.
> - `<Html>`, `<Head />`, `<Main />` and `<NextScript />` are required for the page to be properly rendered.
> - `_document`는 서버에서만 렌더링되므로, 이 파일에서는 `onClick`과 같은 이벤트 핸들러를 사용할 수 없습니다.
> - 페이지가 제대로 렌더링되려면 `<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>` 코드에만 사용해야 합니다. `<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, {
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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`가 추가되어 있습니다.
Loading