ServBay에서 Next.js 프로젝트 생성 및 실행하기

개요

Next.js는 Vercel에서 개발 및 유지보수하는 강력한 React 프레임워크로, 현대적이고 고성능의 웹 애플리케이션 구축에 널리 사용됩니다. Next.js는 React 기반 위에 다양한 기능을 기본 제공하여, 개발자가 복잡한 애플리케이션을 보다 쉽게 개발할 수 있도록 도와줍니다.

Next.js란 무엇인가요?

Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등 다양한 렌더링 방식을 지원하는 인기 오픈소스 React 프레임워크입니다. 이러한 기능은 애플리케이션의 성능 향상, 사용자 경험 개선, 그리고 검색 엔진 최적화에 도움이 됩니다. Next.js는 파일 시스템 라우팅, API 라우트, 코드 스플리팅, CSS Modules 지원 등 다양한 기능을 내장하고 있어 올인원 개발 환경을 제공합니다.

Next.js의 주요 특징 및 장점

다양한 렌더링 전략 지원: 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 렌더링(CSR), 그리고 혼합 렌더링 방식을 지원하여, 프로젝트 요구에 따라 최적의 방식을 선택할 수 있습니다.
파일 시스템 기반 라우팅: pages 또는 app 디렉토리 구조에 따라 라우트가 자동 생성되어, 직관적이고 간편합니다.
API 라우트 제공: Next.js 프로젝트 내에 직접 API 엔드포인트를 생성할 수 있어, 프론트엔드와 백엔드의 통합 개발이 가능합니다.
자동 코드 스플리팅: 페이지 단위 코드 분할로, 현재 페이지에 필요한 JavaScript만 로드되어 로딩 속도가 향상됩니다.
이미지 최적화 컴포넌트(next/image): 이미지 크기, 포맷, 로딩 전략을 자동 최적화하여 성능을 개선합니다.
내장 CSS 및 Sass 지원: 스타일을 효과적으로 관리하고 작성할 수 있습니다.
빠른 새로고침(Fast Refresh): 개발 도중 변경 사항을 거의 즉시 브라우저에서 확인이 가능합니다.

Next.js를 활용하면, 개발자는 고성능, 확장성, 유지 보수성이 뛰어난 현대적 웹 애플리케이션을 보다 효율적으로 구축할 수 있습니다.

ServBay로 Next.js 프로젝트 실행하기

ServBay는 Node.js를 비롯한 다양한 언어와 도구를 포함한 통합 로컬 웹 개발 환경을 제공합니다. ServBay의 Node.js 환경과 웹사이트 관리 기능(리버스 프록시 및 정적 파일 서비스 포함)을 활용하면, Next.js 프로젝트를 간편하게 생성, 개발, 배포할 수 있습니다.

이 안내서에서는 ServBay 환경에서 Next.js 프로젝트 생성, 개발 모드 실행(리버스 프록시 활용), 그리고 프로덕션 모드 배포(정적 파일 서비스 활용) 방법을 순차적으로 설명합니다.

사전 준비 사항

본 과정을 진행하기 전 아래 준비 사항을 확인하세요:

macOS 시스템에 ServBay를 성공적으로 설치했는지 확인합니다.
ServBay의 패키지 관리 화면에서 필요한 Node.js 패키지를 설치 및 활성화했는지 확인합니다. Node.js가 설치되지 않았다면, ServBay의 Node.js 환경 사용하기 문서를 참고하세요.

작업 절차

1. Next.js 프로젝트 생성

먼저, 새로운 Next.js 프로젝트를 초기화합니다.

터미널을 열고 ServBay의 기본 웹사이트 루트 디렉터리로 이동합니다:
bash
```
cd /Applications/ServBay/www
```
1
create-next-app으로 프로젝트 초기화: 아래 명령어로 새 Next.js 프로젝트를 생성합니다. 예시로 프로젝트명을 servbay-next-app으로 지정하였으며, /Applications/ServBay/www 내에 동일한 폴더가 생성됩니다.
bash
```
npx create-next-app@latest servbay-next-app
```
1
npx는 Node.js 패키지 명령 실행 도구이고, create-next-app@latest는 최신 버전의 Next.js 초기화 툴을 사용합니다. 터미널에서 안내하는 설정(예: TypeScript, ESLint, Tailwind CSS, App Router 사용 여부 등)을 따라 진행하면 됩니다.
프로젝트 디렉터리로 이동 후 의존성 설치:
bash
```
cd servbay-next-app
npm install
```
1
2
npm install 명령은 프로젝트의 package.json에 정의된 모든 필수 의존성 패키지를 설치합니다.

2. 프로젝트 기본 출력 수정(선택 사항)

프로젝트가 정상적으로 구동되는지 확인하기 위해, 메인 페이지 내용을 간단히 수정해보겠습니다.

pages/index.js 파일 열기 (Pages Router 사용 시). App Router를 선택한 경우 app/page.js 파일을 열어 수정합니다. 본 예시는 Pages Router 기준입니다:
bash
```
# VS Code 등 선호하는 에디터로 파일 열기
code pages/index.js
```
1
2
파일 내용 수정—"Hello ServBay!"가 출력되도록 변경합니다. 다음과 같은 구조로 파일을 교체 또는 수정하세요:
javascript
```
// pages/index.js (Pages Router)
export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
      <p>This page is running via ServBay.</p>
    </div>
  );
}
```
1
2
3
4
5
6
7
8
9
App Router(app/page.js)를 사용하는 경우에도, <h1> 태그 내용을 위와 같이 바꿔주면 됩니다.

3. 개발 모드 진입

개발 시에는 Next.js의 개발 서버를 이용합니다. 이 서버는 HMR(핫 모듈 교체)와 Fast Refresh를 지원해, 코드 변경시 결과를 실시간으로 확인할 수 있습니다. ServBay의 리버스 프록시 기능을 활용해 외부 도메인을 이 개발 서버 포트로 연결할 수 있습니다.

Next.js 개발 서버 실행: 프로젝트 루트(/Applications/ServBay/www/servbay-next-app)에서 아래 명령을 실행합니다:
bash
```
npm run dev -- -p 8585
```
1
위 명령은 Next.js 개발 서버를 실행하며, -- -p 8585 옵션으로 로컬 8585 포트를 청취하도록 지정합니다. 필요에 따라 다른 사용 가능한 포트로 변경 가능합니다.
ServBay 웹사이트(리버스 프록시) 설정: ServBay 앱의 웹사이트 관리 화면을 열고, 새 웹사이트 추가를 클릭하여 다음과 같이 설정합니다:
- 이름(Name): My first Next.js dev site (또는 원하는 명칭)
- 도메인(Domain): servbay-next-dev.servbay.demo (로컬 테스트 도메인으로 .servbay.demo 권장)
- 웹사이트 유형(Website Type): Reverse Proxy(리버스 프록시) 선택
- 프록시 IP(Proxy IP): 127.0.0.1 (로컬 루프백 주소)
- 프록시 포트(Proxy Port): 8585 (Next.js 개발 서버 포트)
설정을 완료한 후 저장 및 적용을 누르세요. ServBay는 servbay-next-dev.servbay.demo 요청이 127.0.0.1:8585로 전달되도록 Caddy 또는 Nginx(설정에 따라)를 자동 구성합니다.
자세한 설정 방법은 ServBay에서 Node.js 개발용 웹사이트 추가하기 문서를 참고하세요.
개발 모드 사이트 접속: 브라우저에서 https://servbay-next-dev.servbay.demo로 접속합니다.
ServBay는 기본적으로 자체 CA 인증서를 통해 해당 도메인에 SSL 인증서를 자동 발급·설정합니다. 따라서 브라우저 경고 없이 HTTPS로 안전하게 로컬 개발 사이트 접속이 가능합니다. 커스텀 도메인 및 무료 SSL 인증서 활용도 지원하므로, 로컬 개발 시 매우 편리합니다.

4. 프로덕션 빌드 및 정적 사이트 배포

Next.js 프로젝트 개발이 완료되고, 배포를 준비할 때는 최적화된 프로덕션 빌드를 생성합니다. 정적 출력이 가능한 Next.js 프로젝트(output: 'export' 설정 또는 next export 명령 사용)는 ServBay의 정적 웹사이트 서비스에 이상적입니다.

Next.js 프로젝트 빌드 및 정적 파일 내보내기: 프로젝트 루트(/Applications/ServBay/www/servbay-next-app)에서 아래 명령을 실행합니다:
bash
```
npm run build
npm run export
```
1
2
- npm run build: Next.js 프로젝트 코드를 컴파일하여 최적화된 프로덕션 빌드를 생성합니다.(일반적으로 .next 디렉토리에 출력)
- npm run export(Next.js 설정 필요 및 구버전 지원) 또는 output: 'export' 옵션: 생성된 애플리케이션을 완전히 정적인 HTML, CSS, JS 파일로 내보내며, 결과물은 out 폴더에 저장됩니다.
ServBay 웹사이트(정적 파일 서비스) 설정: ServBay 앱의 웹사이트 관리 화면을 열고, 새 웹사이트 추가를 클릭하여 다음과 같이 설정합니다:
- 이름(Name): My first Next.js production site (또는 원하는 명칭)
- 도메인(Domain): servbay-next-prod.servbay.demo (.servbay.demo 권장)
- 웹사이트 유형(Website Type): Static(정적)
- 웹사이트 루트(Website Root): Next.js가 내보낸 정적 파일이 위치한 out 폴더의 절대 경로, 예시 /Applications/ServBay/www/servbay-next-app/out
저장 및 적용을 완료하면, ServBay가 웹 서버를 설정해 /Applications/ServBay/www/servbay-next-app/out에서 직접 파일을 제공합니다.
프로덕션 사이트 접속: 브라우저에서 https://servbay-next-prod.servbay.demo로 접속하면, Next.js로 빌드·내보낸 정적 사이트를 볼 수 있습니다.
마찬가지로, ServBay의 커스텀 도메인 및 자동 SSL 설정을 통해 로컬 프로덕션 환경 웹사이트도 HTTPS로 안전하게 서비스됩니다.

요약

이상의 과정을 통해 ServBay 로컬 개발 환경에서 Next.js 프로젝트를 성공적으로 생성하였으며, 개발 모드에서는 ServBay의 리버스 프록시 기능을 이용해 실시간 미리보기, 프로덕션 빌드 후에는 정적 파일 서비스를 활용한 배포 방법을 익혔습니다. ServBay의 통합 환경과 편리한 웹사이트 관리 기능 덕분에 Next.js 프로젝트의 로컬 개발과 테스트가 훨씬 간편해집니다.

ServBay에서 Next.js 프로젝트 생성 및 실행하기 ​

개요 ​

Next.js란 무엇인가요? ​

Next.js의 주요 특징 및 장점 ​

ServBay로 Next.js 프로젝트 실행하기 ​

사전 준비 사항 ​

작업 절차 ​

1. Next.js 프로젝트 생성 ​

2. 프로젝트 기본 출력 수정(선택 사항) ​

3. 개발 모드 진입 ​

4. 프로덕션 빌드 및 정적 사이트 배포 ​

요약 ​