Next.js 14 + NestJS 11 풀스택 스켈레톤 공개 (Express 단일 서버 기반)

적합한 스켈레톤이 없어서 직접 작업했습니다.

NestJS 기반의 API 서버가 주인공이 되는 구조를 원하고,
Next.js는 일부 페이지만 SSR로 사용하고 싶은 경우 적합한 스켈레톤입니다.

---

✅ 구조 개요

• Express가 루트 서버입니다.
• 모든 요청은 Express → NestJS로 전달됩니다.
• 단, Next.js에 등록된 페이지 경로만 Express → Next.js로 라우팅됩니다.
• 하나의 포트에서 NestJS API와 Next.js 페이지가 공존합니다.

🔄 라우팅 구조 다이어그램

NestJS가 메인 API 서버이고, Next.js는 일부 페이지 렌더링만 담당하는 구조입니다.
모든 요청은 Express를 거쳐 NestJS 또는 Next.js로 분기됩니다.

         🔵 Client (브라우저 요청)
                    │
                    ▼
          ┌────────────────────┐
          │     Express.js   │  ← 단일 서버 진입점
          └────────────────────┘
                   │
         ┌──────────┴────────────┐
         ▼                     ▼
 ┌────────────────┐     ┌────────────────┐
 │   Next.js 14  │     │   NestJS 11  │
 │   (App Router)│     │   (API Layer)│
 └────────────────┘     └────────────────┘
         │                     │
         ▼                     ▼
     📄 SSR/CSR 페이지     🔧 API 처리
     (ex. /login)           (ex. /api/user)

💡 Next.js 페이지에 해당하지 않는 모든 라우팅 요청은 NestJS가 처리합니다.
하나의 포트로 서비스되며, HTTPS도 적용 가능합니다.

---

🔧 사용 기술

• NestJS 11 (API 중심 백엔드)
• Next.js 14 App Router (SSR + CSR 혼합 지원)
• TypeScript 기반 monorepo
• Prettier + ESLint + Husky 설정 포함
• HTTPS 개발 지원 (self-signed cert 사용)

---

🗂️ 폴더 구조 (요약)

src/
├── nextjs/      # Next.js 앱
├── modules/     # NestJS 도메인 모듈
├── common/      # DTO, Type, Exception 등
├── main.ts      # Express → Nest + Next 부트스트랩

---

🚀 실행 방법

npm install
npm run start:dev

.env.development 파일에 포트를 설정하세요:

PORT=4000

---

🔗 GitHub 링크

👉 next14nest11skeleton on GitHub

---

💬 이런 분께 추천합니다

• API 서버가 메인이고, Next는 보조 UI 역할인 구조가 필요할 때
• OAuth나 DB 설정 없이 빠르게 프로젝트 구조를 잡고 싶을 때
• Next + Nest를 하나의 포트에서 운영하고 싶을 때
• Express 기반의 커스터마이징이 필요한 경우

---

Star ⭐️ 한 번 눌러주시면 힘이 됩니다!