From 86406ca589fbb63f4f52c9f0f699519083bbca73 Mon Sep 17 00:00:00 2001 From: HarrySeop <141125424+HarrySeop@users.noreply.github.com> Date: Sun, 8 Sep 2024 23:14:15 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[#124]=20docs:=20head=20=EB=B2=88=EC=97=AD?= =?UTF-8?q?=20(#130)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [#124] docs: head 번역 * [#124] typo: 헤딩 메시지 영문 유지 --- .../pages/api-reference/components/head.mdx | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/pages/docs/pages/api-reference/components/head.mdx b/pages/docs/pages/api-reference/components/head.mdx index 8328603..0d2ec6a 100644 --- a/pages/docs/pages/api-reference/components/head.mdx +++ b/pages/docs/pages/api-reference/components/head.mdx @@ -3,15 +3,17 @@ title: description: Add custom elements to the `head` of your page with the built-in Head component. --- +# `` +
- Examples + 예시 -- [Head Elements](https://github.com/vercel/next.js/tree/canary/examples/head-elements) -- [Layout Component](https://github.com/vercel/next.js/tree/canary/examples/layout-component) +- [Head 엘리먼트](https://github.com/vercel/next.js/tree/canary/examples/head-elements) +- [Layout 컴포넌트](https://github.com/vercel/next.js/tree/canary/examples/layout-component)
-We expose a built-in component for appending elements to the `head` of the page: +페이지의 head에 엘리먼트를 추가하기 위한 내장 컴포넌트를 제공합니다: ```jsx import Head from 'next/head' @@ -32,7 +34,7 @@ export default IndexPage ## Avoid duplicated tags -To avoid duplicate tags in your `head` you can use the `key` property, which will make sure the tag is only rendered once, as in the following example: +`head`에 중복된 태그를 방지하기 위해 `key` 속성을 사용할 수 있습니다. 이는 다음 예제에서와 같이 태그가 한 번만 렌더링되도록 보장합니다: ```jsx import Head from 'next/head' @@ -55,19 +57,18 @@ function IndexPage() { export default IndexPage ``` -In this case only the second `` is rendered. `meta` tags with duplicate `key` attributes are automatically handled. +이 경우 두 번째 ``만 렌더링됩니다. `key` 속성이 동일한 `meta` 태그는 자동으로 처리됩니다. -> The contents of `head` get cleared upon unmounting the component, so make sure each page completely defines what it needs in `head`, without making assumptions about what other pages added. +> `head`의 내용은 컴포넌트가 마운트 해제될 때 삭제되므로, 각 페이지는 다른 페이지에서 추가한 내용을 가정하지 않고 `head`에 필요한 모든 것을 완전히 정의해야 합니다. ## Use minimal nesting -`title`, `meta` or any other elements (e.g. `script`) need to be contained as **direct** children of the `Head` element, -or wrapped into maximum one level of `` or arrays—otherwise the tags won't be correctly picked up on client-side navigations. +`title`, `meta` 또는 다른 엘리먼트(`script` 등)는 **반드시** `Head` 엘리먼트의 자식으로 포함되거나, `` 또는 배열로 한 단계만 감싸야 합니다. 그렇지 않으면 클라이언트 사이드 내비게이션에서 태그가 올바르게 인식되지 않습니다. ## Use `next/script` for scripts -We recommend using [`next/script`](/docs/pages/building-your-application/optimizing/scripts) in your component instead of manually creating a `