NextJS 팁: 동적 서버를 위한 핫 리로딩

동적 라우팅(Express 사용)이 있는 NextJS 앱을 개발 중이고 변경할 때마다 서버를 종료(CTRL+C)하고 다시 시작하는 지루한 프로세스를 수행해야 한다는 것을 발견했습니까? (npm run dev ).

NodeJS 또는 ExpressJS 작업에 익숙하다면 아마도 nodemon 을 접했을 것입니다. 노드 기반 서버에서 핫 리로딩을 가능하게 하는 유틸리티이므로 서버 파일을 변경하고 저장할 때마다 사용자의 프롬프트 없이 즉시 다시 시작하기 시작합니다.

그러나 nodemon은 NextJS와 함께 즉시 작동하지 않으며 약간의 구성이 필요합니다. 구성이나 적절한 CLI 매개변수 없이 nodemon을 실행하려고 하면 서버가 정말 불안정하게 작동하기 시작한다는 것을 알게 될 것입니다. 내 서버는 NextJS가 컴파일될 때마다 변경 사항을 감지하고 컴파일의 무한 루프를 트리거하기 때문에 무한히 다시 시작되었습니다.

This guide assumes you have a NextJS project with dynamic routing setup. You can find a few in the examples section of the NextJS repo

해결책?

Nodemon은 구성 파일을 허용하므로 프로세스를 더 많이 제어할 수 있습니다. 이 파일에 몇 가지 값을 추가하면 모든 문제를 해결할 수 있습니다.

노드몬 설치

아직 설치하지 않았다면 nodemon을 설치하십시오.
npm install --save-dev nodemon

구성 파일 생성

프로젝트 루트에 nodemon.json 파일을 만들고 다음을 붙여넣습니다.

{
    "verbose": true,
    "ignore": ["node_modules", ".next"],
    "watch": ["server/**/*", "server.js"],
    "ext": "js json"
}

이것은 nodemon에게 Next 컴파일러의 캐시로 사용되는 .next 폴더를 무시하도록 지시하고 무한 재로드를 트리거합니다. 또한 변경 사항을 관찰할 파일을 알려줍니다. 별도의 파일과 폴더가 필요한 route/middleware/etc와 같은 항목이 있으므로 서버 파일을 별도의 서버 폴더에 보관합니다.

npm dev 스크립트 업데이트

이제 기본값package.json 대신 nodemon을 사용하도록 node server.js를 수정하고 'dev' 스크립트 값을 업데이트할 수 있습니다.

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

이제 npm run dev를 실행할 수 있으며 핫 리로딩 서버를 갖게 됩니다.

사람들이 같은 문제를 겪고 있던 the NextJS Github issues 에서 이 솔루션을 찾았습니다.

도움이 되기를 바랍니다 ✌️
료


참조:

nodemon

NextJS Github issue - hot reloading