커스텀 서버

Next.js는 기본적으로 next start로 자체 서버를 포함합니다. 기존 백엔드가 있다면 Next.js와 함께 사용할 수 있습니다 (이는 커스텀 서버가 아닙니다). 커스텀 Next.js 서버를 사용하면 프로그래밍 방식으로 커스텀 패턴에 맞는 서버를 시작할 수 있습니다. 대부분의 경우 이 접근 방식이 필요하지 않습니다. 하지만 필요한 경우 사용할 수 있습니다.

알아두면 좋은 점:

커스텀 서버 사용을 결정하기 전에, Next.js의 통합 라우터가 앱 요구 사항을 충족할 수 없는 경우에만 사용해야 한다는 점을 유념하세요. 커스텀 서버를 사용하면 자동 정적 최적화 와 같은 중요한 성능 최적화가 제거됩니다.

커스텀 서버는 Vercel에 배포할 수 없습니다.

독립 실행형 출력 모드를 사용할 때는 커스텀 서버 파일을 추적하지 않습니다. 이 모드는 대신 별도의 최소한의 server.js 파일을 출력합니다. 이들은 함께 사용할 수 없습니다.

커스텀 서버의 다음 예시를 살펴보세요:

server.ts

import { createServer } from "http";
import { parse } from "url";
import next from "next";
 
const port = parseInt(process.env.PORT || "3000", 10);
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
 
app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url!, true);
    handle(req, res, parsedUrl);
  }).listen(port);
 
  console.log(
    `> Server listening at http://localhost:${port} as ${
      dev ? "development" : process.env.NODE_ENV
    }`
  );
});

server.js

import { createServer } from "http";
import { parse } from "url";
import next from "next";
 
const port = parseInt(process.env.PORT || "3000", 10);
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
 
app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url!, true);
    handle(req, res, parsedUrl);
  }).listen(port);
 
  console.log(
    `> Server listening at http://localhost:${port} as ${
      dev ? "development" : process.env.NODE_ENV
    }`,
  );
});

server.js는 Next.js 컴파일러나 번들링 프로세스를 거치지 않습니다. 이 파일이 요구하는 구문과 소스 코드가 현재 사용 중인 Node.js 버전과 호환되는지 확인하세요. 예시 보기.

커스텀 서버를 실행하려면 package.json의 scripts를 다음과 같이 업데이트해야 합니다:

package.json

{
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  }
}

또는 nodemon을 설정할 수 있습니다 (예시). 커스텀 서버는 다음 import를 사용하여 서버를 Next.js 애플리케이션과 연결합니다:

import next from "next";
 
const app = next({});

위의 next import는 다음 옵션을 가진 객체를 받는 함수입니다:

옵션	타입	설명
`conf`	`Object`	`next.config.js`에서 사용할 것과 동일한 객체입니다. 기본값은 `{}`입니다
`customServer`	`Boolean`	(선택사항) Next.js가 서버를 생성한 경우 false로 설정합니다
`dev`	`Boolean`	(선택사항) Next.js를 개발 모드로 실행할지 여부입니다. 기본값은 `false`입니다
`dir`	`String`	(선택사항) Next.js 프로젝트의 위치입니다. 기본값은 `'.'`입니다
`quiet`	`Boolean`	(선택사항) 서버 정보가 포함된 오류 메시지를 숨깁니다. 기본값은 `false`입니다
`hostname`	`String`	(선택사항) 서버가 실행 중인 호스트 이름입니다
`port`	`Number`	(선택사항) 서버가 실행 중인 포트입니다
`httpServer`	`node:http#Server`	(선택사항) Next.js가 실행 중인 HTTP 서버입니다

반환된 app은 필요에 따라 Next.js가 요청을 처리하도록 하는 데 사용할 수 있습니다.

src 디렉토리 드래프트 모드