Next.js + Kotlin Spring Boot 프로젝트

간단한 풀스택 웹 애플리케이션 스타터 프로젝트입니다.

프로젝트 구조

portfolio/
├── frontend/          # Next.js 14 (React + TypeScript)
│   ├── src/
│   │   └── app/
│   ├── package.json
│   └── next.config.js
└── backend/           # Spring Boot 3.2 (Kotlin)
    ├── src/
    │   └── main/
    │       ├── kotlin/
    │       └── resources/
    ├── build.gradle.kts
    └── gradlew

기술 스택

프론트엔드

• Next.js 14 - React 프레임워크 (App Router)
• TypeScript - 타입 안정성
• React 18 - UI 라이브러리

백엔드

• Spring Boot 3.2 - 엔터프라이즈 프레임워크
• Kotlin - JVM 언어
• Gradle - 빌드 도구

실행 방법

방법 1: 한 번에 실행 (추천) ⭐

./start.sh

종료하려면:

./stop.sh

방법 2: npm 스크립트 사용

# 프론트엔드 의존성 설치 (최초 1회)
npm run install:all

# 개발 서버 실행 (프론트엔드 + 백엔드 동시)
npm install  # concurrently 설치
npm run dev

방법 3: 개별 실행

백엔드 실행 (포트 8080):

cd backend
./gradlew bootRun

프론트엔드 실행 (포트 3000): 새 터미널에서:

cd frontend
npm install
npm run dev

확인

브라우저에서 http://localhost:3000 접속

• 프론트엔드에서 백엔드 API를 호출하여 메시지를 표시합니다

API 엔드포인트

• GET /api/hello - 간단한 인사 메시지 반환

개발 시작하기

프론트엔드 개발

• frontend/src/app/page.tsx - 메인 페이지
• frontend/src/app/layout.tsx - 레이아웃
• Next.js는 /api/* 요청을 자동으로 백엔드(8080)로 프록시합니다

백엔드 개발

• backend/src/main/kotlin/com/example/backend/controller/ - REST 컨트롤러
• backend/src/main/resources/application.properties - 설정 파일

다음 단계

1. 데이터베이스 추가

   • Spring Data JPA + PostgreSQL/MySQL
   • Entity, Repository, Service 레이어 구성

2. 인증/인가

   • Spring Security + JWT
   • 로그인/회원가입 기능

3. UI 개선

   • Tailwind CSS 추가
   • 컴포넌트 라이브러리 (shadcn/ui 등)

4. 배포

   • 프론트엔드: Vercel
   • 백엔드: Docker + AWS/GCP/Azure