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.

Sign up for GitHub

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

[#57] docs: custom server 번역 #58

Merged
merged 1 commit into from
Jul 31, 2024
Merged

[#57] docs: custom server 번역 #58

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
60 changes: 29 additions & 31 deletions pages/docs/pages/building-your-application/configuring/custom-server.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Custom Server
description: Start a Next.js app programmatically using a custom server.
---

{/* TODO: 번역이 필요합니다. */}

# Custom Server

<details>
Expand All @@ -15,15 +13,15 @@ description: Start a Next.js app programmatically using a custom server.

</details>

By default, Next.js includes its own server with `next start`. If you have an existing backend, you can still use it with Next.js (this is not a custom server). A custom Next.js server allows you to start a server 100% programmatically in order to use custom server patterns. Most of the time, you will not need this - but it's available for complete customization.
기본적으로 Next.js는 `next start`와 함께 자체 서버를 포함합니다. 기존 백엔드가 있는 경우에도 Next.js와 함께 사용할 수 있습니다(이는 커스텀 서버가 아닙니다). 커스텀 Next.js 서버는 커스텀 서버 패턴을 사용하기 위해 100% 프로그래매틱하게 서버를 시작할 수 있게 합니다. 대부분의 경우, 이것이 필요하지 않겠지만 완전한 커스터마이징을 위해 사용할 수 있습니다.

> **Good to know**:
> **알아두면 좋은 점**:
>
> - Before deciding to use a custom server, please keep in mind that it should only be used when the integrated router of Next.js can't meet your app requirements. A custom server will remove important performance optimizations, like **serverless functions** and **[Automatic Static Optimization](/docs/pages/building-your-application/rendering/automatic-static-optimization).**
> - A custom server **cannot** be deployed on [Vercel](https://vercel.com/solutions/nextjs).
> - Standalone output mode, does not trace custom server files and this mode outputs a separate minimal `server.js` file instead.
> - 커스텀 서버를 사용하기로 결정하기 전에, Next.js의 통합 라우터가 애플리케이션 요구사항을 충족하지 못할 때만 사용해야 한다는 점을 유의하세요. 커스텀 서버는 **서버리스 함수**와 **[자동 정적 최적화](/docs/pages/building-your-application/rendering/automatic-static-optimization)** 같은 중요한 성능 최적화를 제거합니다.
> - 커스텀 서버는 [Vercel](https://vercel.com/solutions/nextjs)에 배포할 수 **없습니다**.
> - Standalone output 모드는 커스텀 서버 파일을 추적하지 않으며, 이 모드는 별도의 최소한의 `server.js` 파일을 출력합니다.

Take a look at the following example of a custom server:
다음은 커스텀 서버의 예제입니다:

```js filename="server.js"
const { createServer } = require('http')
Expand All @@ -33,15 +31,15 @@ const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const hostname = 'localhost'
const port = 3000
// when using middleware `hostname` and `port` must be provided below
// 미들웨어를 사용할 때 `hostname`과 `port`를 아래에 제공해야 합니다.
const app = next({ dev, hostname, port })
const handle = app.getRequestHandler()

app.prepare().then(() => {
createServer(async (req, res) => {
try {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
// `url.parse`에 두 번째 인수로 `true`를 전달해야 합니다.
// 이는 URL의 쿼리 부분을 구문 분석하도록 지시합니다.
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl

Expand All @@ -53,7 +51,7 @@ app.prepare().then(() => {
await handle(req, res, parsedUrl)
}
} catch (err) {
console.error('Error occurred handling', req.url, err)
console.error('처리 중 오류 발생', req.url, err)
res.statusCode = 500
res.end('internal server error')
}
Expand All @@ -68,9 +66,9 @@ app.prepare().then(() => {
})
```

> `server.js` doesn't go through babel or webpack. Make sure the syntax and sources this file requires are compatible with the current node version you are running.
> `server.js`는 babel이나 webpack을 통과하지 않습니다. 이 파일이 필요로 하는 문법과 소스가 현재 실행 중인 Node 버전과 호환되는지 확인하세요.

To run the custom server you'll need to update the `scripts` in `package.json` like so:
커스텀 서버를 실행하려면 `package.json`의 `scripts`를 다음과 같이 업데이트해야 합니다:

```json filename="package.json"
{
Expand All @@ -84,40 +82,40 @@ To run the custom server you'll need to update the `scripts` in `package.json` l

---

The custom server uses the following import to connect the server with the Next.js application:
커스텀 서버는 Next.js 애플리케이션과 서버를 연결하기 위해 다음 import를 사용합니다:

```js
const next = require('next')
const app = next({})
```

The above `next` import is a function that receives an object with the following options:
위의 `next` import는 다음 옵션을 포함하는 객체를 받는 함수입니다:

| Option | Type | Description |
| -------------- | ------------------ | ------------------------------------------------------------------------------------------------------------- |
| `conf` | `Object` | The same object you would use in [next.config.js](/docs/pages/api-reference/next-config-js). Defaults to `{}` |
| `customServer` | `Boolean` | (_Optional_) Set to false when the server was created by Next.js |
| `dev` | `Boolean` | (_Optional_) Whether or not to launch Next.js in dev mode. Defaults to `false` |
| `dir` | `String` | (_Optional_) Location of the Next.js project. Defaults to `'.'` |
| `quiet` | `Boolean` | (_Optional_) Hide error messages containing server information. Defaults to `false` |
| `hostname` | `String` | (_Optional_) The hostname the server is running behind |
| `port` | `Number` | (_Optional_) The port the server is running behind |
| `httpServer` | `node:http#Server` | (_Optional_) The HTTP Server that Next.js is running behind |
| Option | Type | Description |
| -------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------- |
| `conf` | `Object` | [next.config.js](/docs/pages/api-reference/next-config-js)에서 사용하는 것과 동일한 객체입니다. 기본값은 `{}`입니다. |
| `customServer` | `Boolean` | (_Optional_) 서버가 Next.js에 의해 생성되었을 때 false로 설정합니다. |
| `dev` | `Boolean` | (_Optional_) Next.js를 개발 모드에서 실행할지 여부를 설정합니다. 기본값은 `false`입니다. |
| `dir` | `String` | (_Optional_) Next.js 프로젝트의 위치입니다. 기본값은 `'.'`입니다. |
| `quiet` | `Boolean` | (_Optional_) 서버 정보가 포함된 오류 메시지를 숨깁니다. 기본값은 `false`입니다. |
| `hostname` | `String` | (_Optional_) 서버가 실행되는 호스트 이름입니다. |
| `port` | `Number` | (_Optional_) 서버가 실행되는 포트입니다. |
| `httpServer` | `node:http#Server` | (_Optional_) Next.js가 실행되는 HTTP 서버입니다. |

The returned `app` can then be used to let Next.js handle requests as required.
반환된 `app`은 Next.js가 요청을 처리할 수 있게 사용하는 데 사용할 수 있습니다.

## Disabling file-system routing

By default, `Next` will serve each file in the `pages` folder under a pathname matching the filename. If your project uses a custom server, this behavior may result in the same content being served from multiple paths, which can present problems with SEO and UX.
기본적으로 `Next`는 `pages` 폴더에 있는 각 파일을 파일명에 해당하는 경로명 아래에서 제공합니다. 프로젝트가 커스텀 서버를 사용하는 경우, 이 동작은 동일한 콘텐츠가 여러 경로에서 제공되는 결과를 초래할 수 있으며, 이는 SEO와 UX에 문제를 일으킬 수 있습니다.

To disable this behavior and prevent routing based on files in `pages`, open `next.config.js` and disable the `useFileSystemPublicRoutes` config:
이 동작을 비활성화하고 `pages`의 파일 기반 라우팅을 방지하려면 `next.config.js`를 열고 `useFileSystemPublicRoutes` 설정을 비활성화하세요:

```js filename="next.config.js"
module.exports = {
useFileSystemPublicRoutes: false,
}
```

> Note that `useFileSystemPublicRoutes` disables filename routes from SSR; client-side routing may still access those paths. When using this option, you should guard against navigation to routes you do not want programmatically.
> 주의하세요: `useFileSystemPublicRoutes`는 SSR에서 파일명 경로를 비활성화하지만, 클라이언트 측 라우팅은 여전히 해당 경로에 접근할 수 있습니다. 이 옵션을 사용할 때는 프로그래매틱하게 접근하지 않도록 경로 탐색을 방지해야 합니다.

> You may also wish to configure the client-side router to disallow client-side redirects to filename routes; for that refer to [`router.beforePopState`](/docs/pages/api-reference/functions/use-router#routerbeforepopstate).
> 클라이언트 측 라우터를 구성하여 파일명 경로로의 클라이언트 측 리디렉션을 허용하지 않도록 하려면 [`router.beforePopState`](/docs/pages/api-reference/functions/use-router#routerbeforepopstate)를 참조하세요.
Loading