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.

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

[#19] docs: runtime-configurations 번역 #85

Merged
merged 1 commit into from
Aug 5, 2024
Merged
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -9,43 +9,43 @@ description: Add client and server runtime configuration to your Next.js app.

> **Warning:**
>
> - **This feature is deprecated.** We recommend using [environment variables](/docs/pages/building-your-application/configuring/environment-variables) instead, which also can support reading runtime values.
> - You can run code on server startup using the [`register` function](/docs/app/building-your-application/optimizing/instrumentation).
> - This feature does not work with [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization), [Output File Tracing](/docs/pages/api-reference/next-config-js/output#automatically-copying-traced-files), or [React Server Components](/docs/app/building-your-application/rendering/server-components).
> - **이 기능은 사용 중단되었습니다.** 대신 [환경 변수](/docs/pages/building-your-application/configuring/environment-variables) 를 사용하는 것을 권장합니다. 이 방법은 런타임 값을 읽는 것도 지원할 수 있습니다.
> - 서버 시작 시 코드를 실행하려면[`register` 함수](/docs/app/building-your-application/optimizing/instrumentation)를 사용할 수 있습니다.
> - 이 기능은 [자동 정적 최적화](/docs/pages/building-your-application/rendering/automatic-static-optimization), [출력 파일 추적](/docs/pages/api-reference/next-config-js/output#automatically-copying-traced-files), or [React 서버 컴포넌트](/docs/app/building-your-application/rendering/server-components) 와 함께 작동하지 않습니다.

To add runtime configuration to your app, open `next.config.js` and add the `publicRuntimeConfig` and `serverRuntimeConfig` configs:
앱에 런타임 구성을 추가하려면 next.config.js를 열고 publicRuntimeConfigserverRuntimeConfig 구성을 추가하십시오:

```js filename="next.config.js"
module.exports = {
serverRuntimeConfig: {
// Will only be available on the server side
// 서버 측에서만 사용할 수 있습니다.
mySecret: 'secret',
secondSecret: process.env.SECOND_SECRET, // Pass through env variables
secondSecret: process.env.SECOND_SECRET, // 환경 변수를 통해 전달
},
publicRuntimeConfig: {
// Will be available on both server and client
// 서버와 클라이언트 모두에서 사용할 수 있습니다.
staticFolder: '/static',
},
}
```

Place any server-only runtime config under `serverRuntimeConfig`.
서버 전용 런타임 구성은 serverRuntimeConfig 아래에 배치하십시오.

Anything accessible to both client and server-side code should be under `publicRuntimeConfig`.
클라이언트 및 서버 측 코드에서 모두 접근할 수 있는 항목은 `publicRuntime₩Config` 아래에 배치하십시오.

> A page that relies on `publicRuntimeConfig` **must** use `getInitialProps` or `getServerSideProps` or your application must have a [Custom App](/docs/pages/building-your-application/routing/custom-app) with `getInitialProps` to opt-out of [Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization). Runtime configuration won't be available to any page (or component in a page) without being server-side rendered.
> `publicRuntimeConfig` 에 의존하는 페이지는 **반드시** `getInitialProps` 또는 `getServerSideProps` 를 사용하거나, [Custom App](/docs/pages/building-your-application/routing/custom-app) 과 함께 `getInitialProps` 를 사용하여 [자동 정적 최적화](/docs/pages/building-your-application/rendering/automatic-static-optimization) 를 선택 해제해야 합니다. 런타임 구성은 서버 측 렌더링이 없는 페이지(또는 페이지 내의 컴포넌트)에는 사용할 수 없습니다.

To get access to the runtime configs in your app use `next/config`, like so:
앱에서 런타임 구성에 액세스하려면 `next/config`를 사용하십시오:

```jsx
import getConfig from 'next/config'
import Image from 'next/image'

// Only holds serverRuntimeConfig and publicRuntimeConfig
// serverRuntimeConfig와 publicRuntimeConfig만 포함합니다.
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
// Will only be available on the server-side
// 서버사이드 에서만 사용 가능합니다.
console.log(serverRuntimeConfig.mySecret)
// Will be available on both server-side and client-side
// 서버사이드 및 클라이언트사이드에서 모두 사용 가능합니다.
console.log(publicRuntimeConfig.staticFolder)

function MyImage() {
Expand Down
Loading