diff --git a/docs/02-app/01-building-your-application/06-configuring/02-eslint.mdx b/docs/02-app/01-building-your-application/06-configuring/02-eslint.mdx index 687559a5d..48022d421 100644 --- a/docs/02-app/01-building-your-application/06-configuring/02-eslint.mdx +++ b/docs/02-app/01-building-your-application/06-configuring/02-eslint.mdx @@ -81,28 +81,28 @@ Next.js는 기본 설정에 이미 번들로 제공되는 ESLint 플러그인 [` 권장 설정에서 사용 -| | Rule | Description | -| :-----------------: | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | -| | [@next/next/google-font-display](/docs/messages/google-font-display) | Google 폰트로 표시 동작을 적용합니다. | -| | [@next/next/google-font-preconnect](/docs/messages/google-font-preconnect) | Google 폰트에 `preconnect`이 사용되었는지 확인합니다. | -| | [@next/next/inline-script-id](/docs/messages/inline-script-id) | 인라인 콘텐츠가 있는 `next/script` 컴포넌트에 `id` 속성을 적용합니다. | -| | [@next/next/next-script-for-ga](/docs/messages/next-script-for-ga) | Google 애널리틱스에 인라인 스크립트를 사용할 때 `next/script` 설정 요소를 선호합니다. | -| | [@next/next/no-assign-module-variable](/docs/messages/no-assign-module-variable) | `module` 변수에 대한 할당을 방지합니다. | -| | [@next/next/no-before-interactive-script-outside-document](/docs/messages/no-before-interactive-script-outside-document) | `next/script`의 `beforeInteractive` 전략이 `pages/_document.js` 외부에서 사용되지 않도록 합니다. | +| | Rule | Description | +| :-----------------: | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | +| | [@next/next/google-font-display](/docs/messages/google-font-display) | Google 폰트로 표시 동작을 적용합니다. | +| | [@next/next/google-font-preconnect](/docs/messages/google-font-preconnect) | Google 폰트에 `preconnect`이 사용되었는지 확인합니다. | +| | [@next/next/inline-script-id](/docs/messages/inline-script-id) | 인라인 콘텐츠가 있는 `next/script` 컴포넌트에 `id` 속성을 적용합니다. | +| | [@next/next/next-script-for-ga](/docs/messages/next-script-for-ga) | Google 애널리틱스에 인라인 스크립트를 사용할 때 `next/script` 설정 요소를 선호합니다. | +| | [@next/next/no-assign-module-variable](/docs/messages/no-assign-module-variable) | `module` 변수에 대한 할당을 방지합니다. | +| | [@next/next/no-before-interactive-script-outside-document](/docs/messages/no-before-interactive-script-outside-document) | `next/script`의 `beforeInteractive` 전략이 `pages/_document.js` 외부에서 사용되지 않도록 합니다. | | | [@next/next/no-css-tags](/docs/messages/no-css-tags) | 수동 스타일시트 태그를 방지합니다. | -| | [@next/next/no-document-import-in-page](/docs/messages/no-document-import-in-page) | `pages/_document.js` 외부에서 `next/document` 가져오기를 방지합니다. | -| | [@next/next/no-duplicate-head](/docs/messages/no-duplicate-head) | `pages/_document.js`에서 ``의 중복 사용을 방지합니다. | -| | [@next/next/no-head-element](/docs/messages/no-head-element) | `` 요소의 사용을 방지합니다. | -| | [@next/next/no-head-import-in-document](/docs/messages/no-head-import-in-document) | `pages/_document.js`에서 `next/head`의 사용을 방지합니다. | -| | [@next/next/no-html-link-for-pages](/docs/messages/no-html-link-for-pages) | 내부 Next.js 페이지로 이동하는 데 `` 요소를 사용하지 않도록 합니다. | -| | [@next/next/no-img-element](/docs/messages/no-img-element) | LCP가 느려지고 대역폭이 높아지므로 `` 요소의 사용을 방지합니다. | -| | [@next/next/no-page-custom-font](/docs/messages/no-page-custom-font) | 페이지 전용 사용자 정의 글꼴을 방지합니다. | -| | [@next/next/no-script-component-in-head](/docs/messages/no-script-component-in-head) | `next/head` 컴포넌트에서 `next/script`를 사용하지 않도록 합니다. | -| | [@next/next/no-styled-jsx-in-document](/docs/messages/no-styled-jsx-in-document) | `pages/_document.js`에서 `styled-jsx`를 사용하지 않도록 합니다. | -| | [@next/next/no-sync-scripts](/docs/messages/no-sync-scripts) | 동기 스크립트를 방지합니다. | -| | [@next/next/no-title-in-document-head](/docs/messages/no-title-in-document-head) | `next/document`에서 `Head` 컴포넌트와 함께 ``을 사용하지 못하도록 합니다. | +| <Check size={18} /> | [@next/next/no-document-import-in-page](/docs/messages/no-document-import-in-page) | `pages/_document.js` 외부에서 `next/document` 가져오기를 방지합니다. | +| <Check size={18} /> | [@next/next/no-duplicate-head](/docs/messages/no-duplicate-head) | `pages/_document.js`에서 `<Head>`의 중복 사용을 방지합니다. | +| <Check size={18} /> | [@next/next/no-head-element](/docs/messages/no-head-element) | `<head>` 요소의 사용을 방지합니다. | +| <Check size={18} /> | [@next/next/no-head-import-in-document](/docs/messages/no-head-import-in-document) | `pages/_document.js`에서 `next/head`의 사용을 방지합니다. | +| <Check size={18} /> | [@next/next/no-html-link-for-pages](/docs/messages/no-html-link-for-pages) | 내부 Next.js 페이지로 이동하는 데 `<a>` 요소를 사용하지 않도록 합니다. | +| <Check size={18} /> | [@next/next/no-img-element](/docs/messages/no-img-element) | LCP가 느려지고 대역폭이 높아지므로 `<img>` 요소의 사용을 방지합니다. | +| <Check size={18} /> | [@next/next/no-page-custom-font](/docs/messages/no-page-custom-font) | 페이지 전용 사용자 정의 글꼴을 방지합니다. | +| <Check size={18} /> | [@next/next/no-script-component-in-head](/docs/messages/no-script-component-in-head) | `next/head` 컴포넌트에서 `next/script`를 사용하지 않도록 합니다. | +| <Check size={18} /> | [@next/next/no-styled-jsx-in-document](/docs/messages/no-styled-jsx-in-document) | `pages/_document.js`에서 `styled-jsx`를 사용하지 않도록 합니다. | +| <Check size={18} /> | [@next/next/no-sync-scripts](/docs/messages/no-sync-scripts) | 동기 스크립트를 방지합니다. | +| <Check size={18} /> | [@next/next/no-title-in-document-head](/docs/messages/no-title-in-document-head) | `next/document`에서 `Head` 컴포넌트와 함께 `<title>`을 사용하지 못하도록 합니다. | | <Check size={18} /> | @next/next/no-typos | [Next.js의 data fetching](/docs/pages/building-your-application/data-fetching)에서 흔히 발생하는 오타를 방지합니다. | -| <Check size={18} /> | [@next/next/no-unwanted-polyfillio](/docs/messages/no-unwanted-polyfillio) | Polyfill.io에서 중복된 폴리필을 방지합니다. | +| <Check size={18} /> | [@next/next/no-unwanted-polyfillio](/docs/messages/no-unwanted-polyfillio) | Polyfill.io에서 중복된 폴리필을 방지합니다. | 애플리케이션에 이미 ESLint가 설정되어 있는 경우, 몇 가지 조건이 충족되지 않는 한 `eslint-config-next`를 포함하지 말고 이 플러그인에서 직접 확장하는 것이 좋습니다. 자세한 내용은 [권장 플러그인 규칙 집합](/docs/pages/building-your-application/configuring/eslint#recommended-plugin-ruleset)을 참조하세요. diff --git a/docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx b/docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx index dd095171a..4bbd7b269 100644 --- a/docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx +++ b/docs/02-app/01-building-your-application/08-upgrading/02-app-router-migration.mdx @@ -49,7 +49,6 @@ Next.js 13으로 업그레이드하고 꼭 새로운 [앱 라우터](/docs/app/b ### `<Image/>` 컴포넌트 - Next.js 12에서는 `next/future/image`를 임시적으로 import 하여 이미지 컴포넌트에 새로운 개선사항을 도입했습니다. 새로운 개선사항에는 클라이언트 사이드의 자바스크립트 감소, 더 쉬운 이미지 확장 및 스타일 지정 방법, 접근성 향상 그리고 네이티브 브라우저 지연 로딩 등이 포함됩니다. 버전 13에서는 이제 해당 새로운 기능이 `next/image`의 기본 값이 됩니다. @@ -254,11 +253,11 @@ export default function Page() { ```jsx filename="app/dashboard/layout.js" import DashboardLayout from './DashboardLayout' - // 서버 컴포넌트 - export default function Layout({ children }) { - return <DashboardLayout>{children}</DashboardLayout> - } - ``` +// 서버 컴포넌트 +export default function Layout({ children }) { + return <DashboardLayout>{children}</DashboardLayout> +} +``` - `DashboardLayout.js` (클라이언트 컴포넌트)의 상호작용하지 않는 부분을 `layout.js` (서버 컴포넌트)로 점진적으로 전환하여 클라이언트에 전송하는 컴포넌트 자바스크립트의 양을 줄일 수 있습니다. @@ -391,36 +390,38 @@ export default function HomePage({ recentPosts }) { ```tsx filename="app/page.tsx" switcher // 클라이언트 컴포넌트 가져오기 import HomePage from './home-page' + ``` async function getPosts() { - const res = await fetch('https://...') - const posts = await res.json() - return posts +const res = await fetch('https://...') +const posts = await res.json() +return posts } - export default async function Page() { - // 서버 컴포넌트에서 직접 데이터 가져오기 - const recentPosts = await getPosts() - // 가져온 데이터를 클라이언트 컴포넌트에 전달하기 - return <HomePage recentPosts={recentPosts} /> - } - ``` +export default async function Page() { + // 서버 컴포넌트에서 직접 데이터 가져오기 + const recentPosts = await getPosts() + // 가져온 데이터를 클라이언트 컴포넌트에 전달하기 + return <HomePage recentPosts={recentPosts} /> +} - ```jsx filename="app/page.js" switcher - // 클라이언트 컴포넌트 가져오기 - import HomePage from './home-page' +```` ```jsx filename="app/page.js" switcher // 클라이언트 컴포넌트 가져오기 import HomePage from './home-page' - export default async function Page() { - // 서버 컴포넌트에서 직접 데이터 가져오기 - const recentPosts = await getPosts() - // 가져온 데이터를 클라이언트 컴포넌트에 전달하기 - return <HomePage recentPosts={recentPosts} /> - } - ``` +```jsx filename="app/page.js" switcher +// 클라이언트 컴포넌트 가져오기 +import HomePage from './home-page' + +export default async function Page() { + // 서버 컴포넌트에서 직접 데이터 가져오기 + const recentPosts = await getPosts() + // 가져온 데이터를 클라이언트 컴포넌트에 전달하기 + return <HomePage recentPosts={recentPosts} /> +} +```` - 이전에 페이지에서 `useRouter`를 사용했다면 새로운 라우팅 훅으로 업데이트해야 합니다. [자세히 알아보기](/docs/app/api-reference/functions/use-router). - 개발 서버를 실행하고 [`http://localhost:3000`](http://localhost:3000)에 방문합니다. 이제 app 디렉토리를 통해 제공되는 기존 인덱스 경로를 확인할 수 있습니다. @@ -493,7 +494,7 @@ export default async function Page() { // 해당 요청은 10초의 유지 시간을 가지며 캐싱 되어야 합니다. // `revalidate` 옵션을 사용한 `getStaticProps`와 유사하게 동작합니다. - + const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 }, }) @@ -916,4 +917,4 @@ export default function RootLayout({ children }) { ## 코드 모드 -Next.js는 더 이상 사용되지 않는 코드베이스를 업그레이드하는 데 도움이 되는 코드 모드 변환을 제공합니다. 자세한 사항은 [코드 모드](/docs/app/building-your-application/upgrading/codemods)를 참조하세요. \ No newline at end of file +Next.js는 더 이상 사용되지 않는 코드베이스를 업그레이드하는 데 도움이 되는 코드 모드 변환을 제공합니다. 자세한 사항은 [코드 모드](/docs/app/building-your-application/upgrading/codemods)를 참조하세요. diff --git a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx index 4d85703ad..5aabfb8c5 100644 --- a/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx +++ b/docs/02-app/02-api-reference/02-file-conventions/01-metadata/app-icons.mdx @@ -19,15 +19,15 @@ description: Favicon, Icon, Apple Icon 파일 컨벤션에 대한 API 레퍼런 Next.js는 파일을 평가하여 앱의 `<head>` 엘리먼트에 해당하는 태그를 자동으로 추가합니다. -| 파일 컨벤션 | 지원하는 파일 타입 | 유효한 위치 | -| --------------------------- | --------------------------------------- | --------------- | -| [`favicon`](#favicon) | `.ico` | `app/` | -| [`icon`](#icon) | `.ico`, `.jpg`, `.jpeg`, `.png`, `.svg` | `app/**/*` | -| [`apple-icon`](#apple-icon) | `.jpg`, `.jpeg`, `.png` | `app/**/*` | +| 파일 컨벤션 | 지원하는 파일 타입 | 유효한 위치 | +| --------------------------- | --------------------------------------- | ----------- | +| [`favicon`](#favicon) | `.ico` | `app/` | +| [`icon`](#icon) | `.ico`, `.jpg`, `.jpeg`, `.png`, `.svg` | `app/**/*` | +| [`apple-icon`](#apple-icon) | `.jpg`, `.jpeg`, `.png` | `app/**/*` | ### `favicon` -`favicon.ico` 이미지 파일을 루트 `/app` 경로 세그먼트에 추가합니다. +`favicon.ico` 이미지 파일을 루트 `/app` 경로 세그먼트에 추가합니다. ```html filename="<head> 결과" <link rel="icon" href="/favicon.ico" sizes="any" /> @@ -64,7 +64,7 @@ Next.js는 파일을 평가하여 앱의 `<head>` 엘리먼트에 해당하는 > - 파일 이름에 숫자 접미사를 추가하여 여러 개의 아이콘을 설정할 수 있습니다. 예를 들어 `icon1.png`, `icon2.png` 등과 같이 작성할 수 있습니다. 번호가 매겨진 파일은 사전 순으로 정렬됩니다. > - 파비콘은 루트 `/app` 세그먼트에서만 설정할 수 있습니다. 보다 세분화가 필요한 경우에는 [`icon`](#icon)을 사용할 수 있습니다. > - 적절한 `<link>` 태그 및 `rel`, `href`, `type`, and `sizes` 와 같은 어트리뷰트는 평가된 파일의 아이콘 타입과 메타데이터에 따라 결정됩니다. -> - 예를 들어 32px * 32px 사이즈의 `.png` 파일은 `type="image/png"`과 `sizes="32x32"` 어트리뷰트를 갖습니다. +> - 예를 들어 32px \* 32px 사이즈의 `.png` 파일은 `type="image/png"`과 `sizes="32x32"` 어트리뷰트를 갖습니다. > - `.ico` 아이콘이 `.svg`보다 선호되는 [브라우저 버그를 방지](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needsa)하기 위해 `sizes="any"` 어트리뷰트가 `favicon.ico` 출력에 추가되었습니다. ## 코드를 사용하여 아이콘 생성 (.js, .ts, .tsx) @@ -73,10 +73,10 @@ Next.js는 파일을 평가하여 앱의 `<head>` 엘리먼트에 해당하는 default exports 함수를 사용하여 `icon` 또는 `apple-icon` 경로를 생성해 앱 아이콘을 만들 수 있습니다. -| 파일 컨벤션 | 지원하는 파일 타입 | -| --------------- | -------------------- | -| `icon` | `.js`, `.ts`, `.tsx` | -| `apple-icon` | `.js`, `.ts`, `.tsx` | +| 파일 컨벤션 | 지원하는 파일 타입 | +| ------------ | -------------------- | +| `icon` | `.js`, `.ts`, `.tsx` | +| `apple-icon` | `.js`, `.ts`, `.tsx` | 아이콘을 생성하는 가장 쉬운 방법은 `next/server`의 [`ImageResponse`](/docs/app/api-reference/functions/image-response) API를 사용하는 것입니다. @@ -116,7 +116,7 @@ export default function Icon() { // ImageResponse 옵션 { // 편의를 위해, 내보낸 아이콘 사이즈 메타데이터를 재사용할 수 있습니다. - // ImageResponse의 너비와 높이도 설정할 수 있습니다. + // ImageResponse의 너비와 높이도 설정할 수 있습니다. ...size, } ) @@ -159,7 +159,7 @@ export default function Icon() { // ImageResponse 옵션 { // 편의를 위해, 내보낸 아이콘 사이즈 메타데이터를 재사용할 수 있습니다. - // ImageResponse의 너비와 높이도 설정할 수 있습니다. + // ImageResponse의 너비와 높이도 설정할 수 있습니다. ...size, } ) @@ -196,7 +196,7 @@ export default function Icon({ params }) { } ``` -| 경로 | URL | `params` | +| 경로 | URL | `params` | | ------------------------------- | ----------- | ------------------------- | | `app/shop/icon.js` | `/shop` | `undefined` | | `app/shop/[slug]/icon.js` | `/shop/1` | `{ slug: '1' }` | @@ -213,9 +213,9 @@ default export 함수는 `Blob` | `ArrayBuffer` | `TypedArray` | `DataView` | `R `icon` 또는 `apple-icon` 경로에서 `size`와 `contentType` 변수를 export 하여 아이콘의 메타 데이터를 선택적으로 설정할 수 있습니다. -| 옵션 | 타입 | -| ----------------------------- | --------------------------------------------------------------------------------------------------------------------- | -| [`size`](#size) | `{ width: number; height: number }` | +| 옵션 | 타입 | +| ----------------------------- | ------------------------------------------------------------------------------------------------------- | +| [`size`](#size) | `{ width: number; height: number }` | | [`contentType`](#contenttype) | `string` - [이미지 MIME 타입](https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types) | #### `size` @@ -258,7 +258,7 @@ export default function Icon() {} `icon` 및 `apple-icon`은 Pages 및 Layouts와 동일한 [경로 세그먼트 설정](/docs/app/api-reference/file-conventions/route-segment-config) 옵션을 사용할 수 있는 특수한 [경로 핸들러](/docs/app/building-your-application/routing/router-handlers)입니다. -| 옵션 | 타입 | 기본값 | +| 옵션 | 타입 | 기본값 | | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | ---------- | | [`dynamic`](/docs/app/api-reference/file-conventions/route-segment-config#dynamic) | `'auto' \| 'force-dynamic' \| 'error' \| 'force-static'` | `'auto'` | | [`revalidate`](/docs/app/api-reference/file-conventions/route-segment-config#revalidate) | `false \| 'force-cache' \| 0 \| number` | `false` | @@ -279,6 +279,6 @@ export default function Icon() {} ## 버전 히스토리 -| 버전 | 변경 사항 | -| --------- | -------------------------------------------- | +| 버전 | 변경 사항 | +| --------- | ---------------------------------- | | `v13.3.0` | `favicon` `icon` `apple-icon` 도입 | diff --git a/docs/02-app/02-api-reference/05-next-config-js/env.mdx b/docs/02-app/02-api-reference/05-next-config-js/env.mdx index a8cfa8a64..cd4befadb 100644 --- a/docs/02-app/02-api-reference/05-next-config-js/env.mdx +++ b/docs/02-app/02-api-reference/05-next-config-js/env.mdx @@ -14,7 +14,7 @@ description: 빌드 시 Next.js 애플리케이션에서 환경 변수를 추가 > **참고**: 이러한 방식으로 지정된 환경 변수는 **항상** 자바스크립트 번들에 포함되며, 환경 변수 이름 앞에 `NEXT_PUBLIC_`을 붙이면 [환경 또는 .env 파일을 통해](/docs/pages/building-your-application/configuring/environment-variables) 지정된 경우에만 영향을 미칩니다. -자바스크립트 번들에 환경 변수를 추가하기 위해서 `next.config.js` 파일을 열고 `env` 설정을 추가합니다. +자바스크립트 번들에 환경 변수를 추가하기 위해서 `next.config.js` 파일을 열고 `env` 설정을 추가합니다. ```js filename="next.config.js" module.exports = { @@ -24,7 +24,7 @@ module.exports = { } ``` -이제 아래와 같이 코드에서 `process.env.customKey` 에 접근할 수 있습니다. +이제 아래와 같이 코드에서 `process.env.customKey` 에 접근할 수 있습니다. ```jsx function Page() { diff --git a/docs/02-app/02-api-reference/05-next-config-js/trailingSlash.mdx b/docs/02-app/02-api-reference/05-next-config-js/trailingSlash.mdx index afd30f991..c0b87dbae 100644 --- a/docs/02-app/02-api-reference/05-next-config-js/trailingSlash.mdx +++ b/docs/02-app/02-api-reference/05-next-config-js/trailingSlash.mdx @@ -19,4 +19,4 @@ module.exports = { | Version | Changes | | -------- | ---------------------- | -| `v9.5.0` | `trailingSlash` added. | \ No newline at end of file +| `v9.5.0` | `trailingSlash` added. | diff --git a/docs/02-app/02-api-reference/05-next-config-js/typedRoutes.mdx b/docs/02-app/02-api-reference/05-next-config-js/typedRoutes.mdx index 2fa589840..2f6750f7d 100644 --- a/docs/02-app/02-api-reference/05-next-config-js/typedRoutes.mdx +++ b/docs/02-app/02-api-reference/05-next-config-js/typedRoutes.mdx @@ -1,7 +1,7 @@ --- title: 타입라우트 (실험적 기능) nav_title: 타입라우트 -description: 정적 타입 링크를 위한 실험적 지원이 가능합니다. +description: 정적 타입 링크를 위한 실험적 지원이 가능합니다. --- [정적 타입 링크](/docs/app/building-your-application/configuring/typescript#statically-typed-links)에 대한 실험적인 지원입니다. 이 기능을 사용하려면 타입 스크립트와 앱 라우터를 사용해야 합니다. diff --git a/docs/03-pages/01-building-your-application/01-routing/07-api-routes.mdx b/docs/03-pages/01-building-your-application/01-routing/07-api-routes.mdx index 0ae239ca6..d840b039e 100644 --- a/docs/03-pages/01-building-your-application/01-routing/07-api-routes.mdx +++ b/docs/03-pages/01-building-your-application/01-routing/07-api-routes.mdx @@ -115,7 +115,7 @@ export const config = { } ``` -`externalResolver`는 이 라우트가 _express_ 또는 _connect_와 같은 외부 리졸버(resolver)에 의해 처리되고 있음을 서버에 명시적으로 알려주는 플래그입니다. 이 옵션을 활성화하면 미해결 요청에 대한 경고가 비활성화됩니다. +`externalResolver`는 이 라우트가 _express_ 또는 *connect*와 같은 외부 리졸버(resolver)에 의해 처리되고 있음을 서버에 명시적으로 알려주는 플래그입니다. 이 옵션을 활성화하면 미해결 요청에 대한 경고가 비활성화됩니다. ```js export const config = { @@ -566,7 +566,7 @@ export default async function handler(req: NextRequest) { 엣지 API 라우트는 [엣지 런타임](/docs/pages/api-reference/edge)을 사용하며, API 라우트는 [Node.js 런타임](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes)을 사용합니다. -엣지 API 라우트는 서버로부터 [응답을 스트림](/docs/pages/api-reference/edge#stream-apis)할 수 있으며, 캐시된 여러 파일(예: HTML, CSS, JavaScript)에 접근한 _이후_에 실행됩니다. 서버 측 스트리밍은 더 빠른 [Time To First Byte (TTFB)](https://web.dev/ttfb/)로 성능을 향상할 수 있습니다. +엣지 API 라우트는 서버로부터 [응답을 스트림](/docs/pages/api-reference/edge#stream-apis)할 수 있으며, 캐시된 여러 파일(예: HTML, CSS, JavaScript)에 접근한 *이후*에 실행됩니다. 서버 측 스트리밍은 더 빠른 [Time To First Byte (TTFB)](https://web.dev/ttfb/)로 성능을 향상할 수 있습니다. > **참고**: `getServerSideProps`와 함께 [엣지 런타임](/docs/pages/api-reference/edge)을 사용하면 응답 객체에 접근할 수 없습니다. `res`에 접근이 필요하다면 `runtime: 'nodejs'`를 설정하여 [Node.js 런타임](/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes)을 사용해야 합니다. diff --git a/docs/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx b/docs/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx index 67714647b..922a113ab 100644 --- a/docs/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx +++ b/docs/03-pages/01-building-your-application/03-data-fetching/04-incremental-static-regeneration.mdx @@ -189,7 +189,7 @@ module.exports = { ## Version History -| 버전 | 변경 사항 | +| 버전 | 변경 사항 | | --------- | ------------------------------------------------------------------------------------------ | | `v12.2.0` | On-Demand ISR이 안정화됐습니다. | | `v12.1.0` | On-Demand ISR이 추가됐습니다(베타). | diff --git a/docs/03-pages/01-building-your-application/05-optimizing/06-lazy-loading.mdx b/docs/03-pages/01-building-your-application/05-optimizing/06-lazy-loading.mdx index 9026f6592..8b890b49d 100644 --- a/docs/03-pages/01-building-your-application/05-optimizing/06-lazy-loading.mdx +++ b/docs/03-pages/01-building-your-application/05-optimizing/06-lazy-loading.mdx @@ -2,4 +2,4 @@ title: Lazy Loading description: 불러온 라이브러리와 React 컴포넌트를 Lazy load해서 애플리케이션의 로드 성능을 향상시킵니다. source: app/building-your-application/optimizing/lazy-loading ---- \ No newline at end of file +--- diff --git a/docs/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx b/docs/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx index 27df5488c..5fd5ed30d 100644 --- a/docs/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx +++ b/docs/03-pages/01-building-your-application/06-configuring/12-error-handling.mdx @@ -100,4 +100,4 @@ export default MyApp ### Reporting Errors -클라이언트 오류를 모니터링하려면 [Sentry](https://github.com/vercel/next.js/tree/canary/examples/with-sentry), Bugsnag 또는 Datadog과 같은 서비스를 사용하세요. \ No newline at end of file +클라이언트 오류를 모니터링하려면 [Sentry](https://github.com/vercel/next.js/tree/canary/examples/with-sentry), Bugsnag 또는 Datadog과 같은 서비스를 사용하세요. diff --git a/docs/03-pages/02-api-reference/02-functions/get-static-props.mdx b/docs/03-pages/02-api-reference/02-functions/get-static-props.mdx index 800790b6f..4085de3aa 100644 --- a/docs/03-pages/02-api-reference/02-functions/get-static-props.mdx +++ b/docs/03-pages/02-api-reference/02-functions/get-static-props.mdx @@ -1,8 +1,10 @@ 이 내용을 참고하여 번역을 진행하겠습니다. --- + title: getStaticProps description: `getStaticProps`에 대한 API 레퍼런스. Next.js를 사용하여 정적 페이지를 생성하는 방법을 배워봅시다. + --- `getStaticProps`함수를 내보내면, 이 함수에서 반환된 props를 사용하여 빌드 시간에 페이지를 사전 렌더링합니다. @@ -48,15 +50,15 @@ export default function Page({ repo }) { `context` 매개변수는 다음 키를 포함하는 객체입니다 -| 이름 | 설명 | -| --------------- | -------- | +| 이름 | 설명 | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `params` | [동적 라우트](/docs/pages/building-your-application/routing/dynamic-routes)를 사용하는 페이지의 라우트 매개변수를 포함합니다. 예를 들어, 페이지 이름이 `[id].js`라면, `params`는 `{ id: ... }`와 같이 보일 것입니다. 이것은 나중에 설명할 `getStaticPaths`와 함께 사용해야 합니다. | -| `preview` | (`draftMode`는 더 이상 사용되지 않습니다) 페이지가 [Preview Mode](/docs/pages/building-your-application/configuring/preview-mode)에 있으면 `preview`는 `true`이고, 그렇지 않으면 `false`입니다.| -| `previewData` | (`draftMode`는 더 이상 사용되지 않습니다) `setPreviewData`에 의해 설정된 [preview](/docs/pages/building-your-application/configuring/preview-mode) 데이터입니다. | -| `draftMode` | 페이지가 [Draft Mode](docs/pages/building-your-application/configuring/draft-mode)에 있으면 `draftMode`는 `true`이고, 그렇지 않으면 `false`입니다. | -| `locale` | 활성화된 locale을 포함합니다(활성화된 경우). | -| `locales` | 지원되는 모든 locales를 포함합니다(활성화된 경우). | -| `defaultLocale` | 설정된 기본 locales를 포함합니다(활성화된 경우). | +| `preview` | (`draftMode`는 더 이상 사용되지 않습니다) 페이지가 [Preview Mode](/docs/pages/building-your-application/configuring/preview-mode)에 있으면 `preview`는 `true`이고, 그렇지 않으면 `false`입니다. | +| `previewData` | (`draftMode`는 더 이상 사용되지 않습니다) `setPreviewData`에 의해 설정된 [preview](/docs/pages/building-your-application/configuring/preview-mode) 데이터입니다. | +| `draftMode` | 페이지가 [Draft Mode](docs/pages/building-your-application/configuring/draft-mode)에 있으면 `draftMode`는 `true`이고, 그렇지 않으면 `false`입니다. | +| `locale` | 활성화된 locale을 포함합니다(활성화된 경우). | +| `locales` | 지원되는 모든 locales를 포함합니다(활성화된 경우). | +| `defaultLocale` | 설정된 기본 locales를 포함합니다(활성화된 경우). | ## getStaticProps 반환 값 @@ -96,8 +98,6 @@ export async function getStaticProps() { } ``` - - [Incremental Static Regeneration](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration)에 대해 더 자세히 알아보세요. ISR을 활용하는 페이지의 캐시 상태는 `x-nextjs-cache` 응답 헤더의 값을 읽음으로써 결정할 수 있습니다. 가능한 값들은 다음과 같습니다. @@ -143,9 +143,7 @@ export async function getStaticProps(context) { if (!data) { return { redirect: { - destination: - -'/', + destination: '/', permanent: false, // statusCode: 301 }, @@ -164,7 +162,6 @@ export async function getStaticProps(context) { `getStaticProps`에서 파일 시스템으로부터 파일을 직접 읽을 수 있습니다. - 이를 위해서는 파일의 전체 경로를 얻어야 합니다. Next.js가 코드를 별도의 디렉토리로 컴파일하기 때문에 `__dirname`을 사용할 수 없습니다. 왜냐하면 반환되는 경로가 페이지 라우터와 다를 것이기 때문입니다. @@ -190,7 +187,7 @@ function Blog({ posts }) { } // 이 함수는 서버 측에서 빌드 시간에 호출됩니다. -// 클라이언트 측에서는 호출되지 않으므로, +// 클라이언트 측에서는 호출되지 않으므로, // 심지어 직접 데이터베이스 쿼리를 수행하는 것도 가능합니다. export async function getStaticProps() { const postsDirectory = path.join(process.cwd(), 'posts') @@ -222,12 +219,12 @@ export default Blog ## 버전 히스토리 -| 버전 | 변경사항 | -| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `v13.4.0` | [App Router](/docs/app/building-your-application/data-fetching)가 간소화된 데이터 가져오기로 안정화되었습니다. | -| `v12.2.0` | [On-Demand Incremental Static Regeneration](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation)이 안정화되었습니다. | +| 버전 | 변경사항 | +| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `v13.4.0` | [App Router](/docs/app/building-your-application/data-fetching)가 간소화된 데이터 가져오기로 안정화되었습니다. | +| `v12.2.0` | [On-Demand Incremental Static Regeneration](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation)이 안정화되었습니다. | | `v12.1.0` | [On-Demand Incremental Static Regeneration](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration#on-demand-revalidation)이 추가되었습니다(베타). | -| `v10.0.0` | `locale`, `locales`, `defaultLocale`, 그리고 `notFound` 옵션이 추가되었습니다. | -| `v10.0.0` | `fallback: 'blocking'` 반환 옵션이 추가되었습니다. | -| `v9.5.0` | Stable [Incremental Static Regeneration](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) | -| `v9.3.0` | `getStaticProps`가 도입되었습니다. \ No newline at end of file +| `v10.0.0` | `locale`, `locales`, `defaultLocale`, 그리고 `notFound` 옵션이 추가되었습니다. | +| `v10.0.0` | `fallback: 'blocking'` 반환 옵션이 추가되었습니다. | +| `v9.5.0` | Stable [Incremental Static Regeneration](/docs/pages/building-your-application/data-fetching/incremental-static-regeneration) | +| `v9.3.0` | `getStaticProps`가 도입되었습니다. | diff --git a/docs/03-pages/02-api-reference/03-next-config-js/env.mdx b/docs/03-pages/02-api-reference/03-next-config-js/env.mdx index 22be8f2fa..0fd224b93 100644 --- a/docs/03-pages/02-api-reference/03-next-config-js/env.mdx +++ b/docs/03-pages/02-api-reference/03-next-config-js/env.mdx @@ -1,6 +1,6 @@ --- -title: env -description: Learn to add and access environment variables in your Next.js application at build time. +title: 환경 변수 +description: 빌드 시 Next.js 애플리케이션에서 환경 변수를 추가하고 액세스하는 방법을 알아보세요. source: app/api-reference/next-config-js/env ---