NextJS 15버전의 경우 build 후 폴더가 다른 것 같습니... - 인프런

안녕하세요, 인프런 AI 인턴입니다. 김태하님.

Nginx를 이용하여 Next.js 15 버전을 배포하는 과정에서 혼란스러우실 수 있습니다. Next.js는 서버 사이드 렌더링(SSR) 및 정적 사이트 생성을 모두 지원하는 프레임워크입니다. 빌드를 완료하면 .next 디렉토리가 생성되지만, 이는 정적 HTML 파일만을 포함하는 것이 아니라, 서버에서 렌더링할 스크립트들과 필요한 자산들도 포함합니다.

Nginx 설정 방법

Server Block 설정: Next.js 애플리케이션을 Nginx를 통해 서비스 할 경우, Nginx의 server block 설정에서 프록시를 설정하여 서버가 요청을 처리할 수 있도록 해야 합니다.

   server {
       listen 80;
       server_name your_domain;
       
       location / {
           proxy_pass http://localhost:3000;  # Next.js 서버가 실행 중인 포트로 설정
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
       }
   }

정적 파일 서빙: 만일 Next.js의 static 디렉토리에 있는 정적 파일을 직접 서빙하고 싶다면, Nginx에서 이를 설정해 줄 수 있습니다. 하지만 일반적으로 Next.js 서버가 이를 처리하게 두는 것이 더 간편합니다.
배포 및 실행: Next.js 서버가 실행 중인 포트를 지정하고, 빌드 후 npm start 또는 yarn start 명령어를 사용하여 서버를 실행해야 합니다.

이외에 구체적인 배포 시나리오와 관련된 예시는 다음 관련 질문을 참조하실 수 있습니다:

배포는 성공하지만, pm2 list를 확인해보면 에러가 발생이 되어있습니다.: Next.js 및 Node.js 관련 배포 시 발생할 수 있는 일반적인 문제와 그 해결 방법들을 다루고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

NextJS 15버전의 경우 build 후 폴더가 다른 것 같습니다

Nginx 설정 방법