CSPM 프로젝트 중 Next.js 14로 코드 작성이 끝난 후 아파치 서버에 배포 하면서 생긴 문제를 해결하면서 알아낸 방식을 정리해 보았다.

1. 문제점 : .next 폴더만 올리면 서버에서 구동이 될 줄 알았으나 그렇지 않았다. JS, CSS 가 빠진 페이지만 보여줄 뿐 링크 또한 정상적으로 작동하지 않았다.

2. 해결점 : build 옵션을 찾아보던중 output: export와 output: standalone 두 방식으로 해결함

그럼 export와 standalone 방식에 대한 차이점에 대해서 설명하겠다.

output : export 정적 배포

Next.js 애플리케이션을 정적 사이트로 내보내는 방식입니다. 서버에서는 페이지를 정적 HTML 파일로 생성하여 브라우저로 내보낸다.

• 특징
  • 성능 : 모든 콘텐츠가 정적 파일로 제공되므로 페이지 로드 속도가 빠릅니다.
  • 보안 : 서버 사이드 로직이 없으므로 공격 표면이 줄어듭니다.
  • 제한사항 : 동적 데이터 fetch, 사용자 맞춤형 기능을 구현하는데 제약이 있습니다.
• 사용법
  • next.config.js 에서 output : 'export'로 설정

  		// next.config.js
  		module.exports = {
  	output: 'export',
  		};
  		```

output : standalone 동적 배포

CSPM 프로젝트에서 최종적으로 선태가한 방법 입니다.
Next.js 애플리케이션을 독립 실행형 애플리케이션으로 배포하는 방식입니다. 이 설정을 사용하면 Next.js는 애플리케이션과 그 종속성을 독립 실행형 폴더로 번들링 합니다.
이 방식은 서버사이드 렌더링을 지원하며, Node.js 환경이 필요합니다.

• 특징
  • 확장성 : SSR 및 API 라우트를 포함한 전체 Next.js 기능을 사용할 수 있습니다.
  • 배포 유연성 : 애플리케이션을 다양한 Node.js 호스팅 환경에 배포할 수 있습니다.
  • 자체 포함 : 애플리케이션과 모든 종속성을 포함한 독립 실행형 패키지를 생성하므로 배포 시 의존성 문제를 줄일 수 있습니다.
• 사용법
  • next.config.js 에서 output : 'standalone'로 설정

  	//next.config.js
	module.exports = {
	output: 'standalone',
	};

빌드가 완료가 된후 .next/standalone 디렉토리가 생성된다.
public 폴더와 .next/static를 standalnoe 폴더 구조에 알맞은 곳에 위치시키고 standalone 폴더를 배포할 곳에 위치 후 node server.js를 입력하면 배포가 완료된다.