diff --git a/.all-contributorsrc b/.all-contributorsrc index 4d01621..1c4ec73 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -285,6 +285,33 @@ "contributions": [ "content" ] + }, + { + "login": "HarrySeop", + "name": "HarrySeop", + "avatar_url": "https://avatars.githubusercontent.com/u/141125424?v=4", + "profile": "https://github.com/HarrySeop", + "contributions": [ + "content" + ] + }, + { + "login": "lionleeee", + "name": "μ •ν›ˆ", + "avatar_url": "https://avatars.githubusercontent.com/u/51181222?v=4", + "profile": "https://velog.io/@lionleeee", + "contributions": [ + "content" + ] + }, + { + "login": "sangseophwang", + "name": "SangSeop Hwang", + "avatar_url": "https://avatars.githubusercontent.com/u/79933417?v=4", + "profile": "https://sangseophwang.tistory.com/", + "contributions": [ + "content" + ] } ], "contributorsPerLine": 7, diff --git a/README.md b/README.md index 527ed13..b2cfb89 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,9 @@ Jinseung
Jinseung
πŸ–‹ Hyunsoo Kim
Hyunsoo Kim
πŸ–‹ λ°•μš°λΉˆ
λ°•μš°λΉˆ
πŸ–‹ + HarrySeop
HarrySeop
πŸ–‹ + μ •ν›ˆ
μ •ν›ˆ
πŸ–‹ + SangSeop Hwang
SangSeop Hwang
πŸ–‹ 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 `