Skip to content

Commit

Permalink
[no-issue] docs: 9월 1주차 문서 업데이트 (#135)
Browse files Browse the repository at this point in the history 
* [#124] docs: head 번역 (#130)
* [#133] Docs : Data Fetching translation (#134)
* [#131] docs: transpilePackages 추가 (#132)
* [no-issue] docs: 기여자 정보 추가

---------

Co-authored-by: HarrySeop <[email protected]>
Co-authored-by: 정훈 <[email protected]>
Co-authored-by: SangSeop Hwang <[email protected]>
  • Loading branch information
@luciancah @HarrySeop
@lionleeee @sangseophwang
4 people authored Sep 8, 2024
1 parent 09f5832 commit 714244d
Show file tree
Hide file tree
Showing 6 changed files with 136 additions and 29 deletions.
27 changes: 27 additions & 0 deletions .all-contributorsrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,9 @@
<td align="center" valign="top" width="14.28%"><a href="https://litt.ly/jinseung_"><img src="https://avatars.githubusercontent.com/u/127307160?v=4?s=100" width="100px;" alt="Jinseung"/><br /><sub><b>Jinseung</b></sub></a><br /><a href="#content-wlstmd" title="Content">🖋</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://velog.io/@mini-boo/posts"><img src="https://avatars.githubusercontent.com/u/81962257?v=4?s=100" width="100px;" alt="Hyunsoo Kim"/><br /><sub><b>Hyunsoo Kim</b></sub></a><br /><a href="#content-mini-boo" title="Content">🖋</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://parkubin.notion.site/a71d9b12489e4a93ab2d7c51b9b1e00b"><img src="https://avatars.githubusercontent.com/u/102154880?v=4?s=100" width="100px;" alt="박우빈"/><br /><sub><b>박우빈</b></sub></a><br /><a href="#content-Ubinquitous" title="Content">🖋</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/HarrySeop"><img src="https://avatars.githubusercontent.com/u/141125424?v=4" width="100px;" alt="HarrySeop"/><br /><sub><b>HarrySeop</b></sub></a><br /><a href="#content-HarrySeop" title="Content">🖋</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://velog.io/@lionleeee"><img src="https://avatars.githubusercontent.com/u/51181222?v=4" width="100px;" alt="정훈"/><br /><sub><b>정훈</b></sub></a><br /><a href="#content-lionleeee" title="Content">🖋</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://sangseophwang.tistory.com/"><img src="https://avatars.githubusercontent.com/u/79933417?v=4" width="100px;" alt="SangSeop Hwang"/><br /><sub><b>SangSeop Hwang</b></sub></a><br /><a href="#content-sangseophwang" title="Content">🖋</a></td>
</tr>
</tbody>
</table>
Expand Down
23 changes: 12 additions & 11 deletions pages/docs/pages/api-reference/components/head.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@ title: <Head>
description: Add custom elements to the `head` of your page with the built-in Head component.
---

# `<Head>`

<details>
<summary>Examples</summary>
<summary>예시</summary>

- [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)

</details>

We expose a built-in component for appending elements to the `head` of the page:
페이지의 head에 엘리먼트를 추가하기 위한 내장 컴포넌트를 제공합니다:

```jsx
import Head from 'next/head'
Expand All @@ -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'
Expand All @@ -55,19 +57,18 @@ function IndexPage() {
export default IndexPage
```

In this case only the second `<meta property="og:title" />` is rendered. `meta` tags with duplicate `key` attributes are automatically handled.
이 경우 두 번째 `<meta property="og:title" />`만 렌더링됩니다. `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 `<React.Fragment>` or arrays—otherwise the tags won't be correctly picked up on client-side navigations.
`title`, `meta` 또는 다른 엘리먼트(`script` 등)는 **반드시** `Head` 엘리먼트의 자식으로 포함되거나, `<React.Fragment>` 또는 배열로 한 단계만 감싸야 합니다. 그렇지 않으면 클라이언트 사이드 내비게이션에서 태그가 올바르게 인식되지 않습니다.

## 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 `<script>` in `next/head`.
컴포넌트 내에서 `<script>`를 next/head에 직접 생성하는 대신 [`next/script`](/docs/pages/building-your-application/optimizing/scripts)를 사용할 것을 권장합니다.

## No `html` or `body` tags

You **cannot** use `<Head>` to set attributes on `<html>` or `<body>` tags. This will result in an `next-head-count is missing` error. `next/head` can only handle tags inside the HTML `<head>` tag.
`<Head>`를 사용하여 `<html>` 또는 `<body>` 태그에 속성을 설정할 수 **없습니다**. 이는 `next-head-count is missing` 오류를 발생시킵니다. `next/head`는 HTML `<head>` 태그 내부의 태그만 처리할 수 있습니다.
25 changes: 25 additions & 0 deletions pages/docs/pages/api-reference/next-config-js/transpilePackages.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
title: transpilePackages
description: Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).
---

{/* 이 문서의 내용은 App Router와 Pages Router에서 공유됩니다. Pages Router에만 해당하는 내용을 추가하려면 `<PagesOnly>내용</PagesOnly>` 컴포넌트를 사용할 수 있습니다. 공유된 내용은 컴포넌트로 감싸지 않아야 합니다. */}

# transpilePackages

Next.js는 로컬 패키지(모노레포와 같은) 또는 외부 종속성(`node_modules`)에서 종속성을 자동으로 트랜스파일하고 번들링할 수 있습니다. 이는 `next-transpile-modules` 패키지를 대체합니다.

```js filename="next.config.js"
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ['package-name'],
}

module.exports = nextConfig
```

## Version History

| Version | Changes |
| --------- | --------------------------- |
| `v13.0.0` | `transpilePackages` 추가됨. |
36 changes: 18 additions & 18 deletions pages/docs/pages/building-your-application/data-fetching.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,24 @@ title: Data Fetching
description: Next.js allows you to fetch data in multiple ways, with pre-rendering, server-side rendering or static-site generation, and incremental static regeneration. Learn how to manage your application data in Next.js.
---

Data fetching in Next.js allows you to render your content in different ways, depending on your application's use case. These include pre-rendering with **Server-side Rendering** or **Static Generation**, and updating or creating content at runtime with **Incremental Static Regeneration**.
Next.js에서 데이터 가져오기는 애플리케이션의 사용 사례에 따라 다양한 방식으로 콘텐츠를 렌더링할 수 있습니다. 여기에는 **서버 사이드 렌더링(Server-side Rendering)** 또는 **정적 생성(Static Generation)**을 통한 사전 렌더링, 그리고 **증분 정적 재생성(Incremental Static Regeneration)**을 통한 런타임 시 콘텐츠 업데이트 또는 생성이 포함됩니다.

## Examples

- [WordPress Example](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress)([Demo](https://next-blog-wordpress.vercel.app))
- [Blog Starter using markdown files](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) ([Demo](https://next-blog-starter.vercel.app/))
- [DatoCMS Example](https://github.com/vercel/next.js/tree/canary/examples/cms-datocms) ([Demo](https://next-blog-datocms.vercel.app/))
- [TakeShape Example](https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape) ([Demo](https://next-blog-takeshape.vercel.app/))
- [Sanity Example](https://github.com/vercel/next.js/tree/canary/examples/cms-sanity) ([Demo](https://next-blog-sanity.vercel.app/))
- [Prismic Example](https://github.com/vercel/next.js/tree/canary/examples/cms-prismic) ([Demo](https://next-blog-prismic.vercel.app/))
- [Contentful Example](https://github.com/vercel/next.js/tree/canary/examples/cms-contentful) ([Demo](https://next-blog-contentful.vercel.app/))
- [Strapi Example](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi) ([Demo](https://next-blog-strapi.vercel.app/))
- [Prepr Example](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr) ([Demo](https://next-blog-prepr.vercel.app/))
- [Agility CMS Example](https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms) ([Demo](https://next-blog-agilitycms.vercel.app/))
- [Cosmic Example](https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic) ([Demo](https://next-blog-cosmic.vercel.app/))
- [ButterCMS Example](https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms) ([Demo](https://next-blog-buttercms.vercel.app/))
- [Storyblok Example](https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok) ([Demo](https://next-blog-storyblok.vercel.app/))
- [GraphCMS Example](https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms) ([Demo](https://next-blog-graphcms.vercel.app/))
- [Kontent Example](https://github.com/vercel/next.js/tree/canary/examples/cms-kontent-ai) ([Demo](https://next-blog-kontent.vercel.app/))
- [Static Tweet Demo](https://static-tweet.vercel.app/)
- [Enterspeed Example](https://github.com/vercel/next.js/tree/canary/examples/cms-enterspeed) ([Demo](https://next-blog-demo.enterspeed.com/))
- [WordPress 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress) ([데모](https://next-blog-wordpress.vercel.app))
- [마크다운 파일을 사용하는 블로그 스타터](https://github.com/vercel/next.js/tree/canary/examples/blog-starter) ([데모](https://next-blog-starter.vercel.app/))
- [DatoCMS 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-datocms) ([데모](https://next-blog-datocms.vercel.app/))
- [TakeShape 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-takeshape) ([데모](https://next-blog-takeshape.vercel.app/))
- [Sanity 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-sanity) ([데모](https://next-blog-sanity.vercel.app/))
- [Prismic 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-prismic) ([데모](https://next-blog-prismic.vercel.app/))
- [Contentful 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-contentful) ([데모](https://next-blog-contentful.vercel.app/))
- [Strapi 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-strapi) ([데모](https://next-blog-strapi.vercel.app/))
- [Prepr 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-prepr) ([데모](https://next-blog-prepr.vercel.app/))
- [Agility CMS 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms) ([데모](https://next-blog-agilitycms.vercel.app/))
- [Cosmic 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-cosmic) ([데모](https://next-blog-cosmic.vercel.app/))
- [ButterCMS 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms) ([데모](https://next-blog-buttercms.vercel.app/))
- [Storyblok 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-storyblok) ([데모](https://next-blog-storyblok.vercel.app/))
- [GraphCMS 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-graphcms) ([데모](https://next-blog-graphcms.vercel.app/))
- [Kontent 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-kontent-ai) ([데모](https://next-blog-kontent.vercel.app/))
- [Static Tweet 데모](https://static-tweet.vercel.app/)
- [Enterspeed 예제](https://github.com/vercel/next.js/tree/canary/examples/cms-enterspeed) ([데모](https://next-blog-demo.enterspeed.com/))
51 changes: 51 additions & 0 deletions pages/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -559,6 +559,57 @@ Next.js 공식 문서 한글 번역 프로젝트입니다. by [@luciancah](https
🖋
</a>
</td>
<td align="center" valign="top" width="14.28%">
<a href="https://github.com/HarrySeop">
<img
src="https://avatars.githubusercontent.com/u/141125424?v=4"
width="100px;"
alt="HarrySeop"
/>
<br />
<sub>
<b>HarrySeop</b>
</sub>
</a>
<br />
<a href="#content-HarrySeop" title="Content">
🖋
</a>
</td>
<td align="center" valign="top" width="14.28%">
<a href="https://velog.io/@lionleeee">
<img
src="https://avatars.githubusercontent.com/u/51181222?v=4"
width="100px;"
alt="정훈"
/>
<br />
<sub>
<b>정훈</b>
</sub>
</a>
<br />
<a href="#content-lionleeee" title="Content">
🖋
</a>
</td>
<td align="center" valign="top" width="14.28%">
<a href="https://sangseophwang.tistory.com/">
<img
src="https://avatars.githubusercontent.com/u/79933417?v=4"
width="100px;"
alt="SangSeop Hwang"
/>
<br />
<sub>
<b>SangSeop Hwang</b>
</sub>
</a>
<br />
<a href="#content-sangseophwang" title="Content">
🖋
</a>
</td>
</tr>
</tbody>
</table>

0 comments on commit 714244d

Please sign in to comment.