Next 프로젝트 초기 구축

프로젝트 생성

App Router와 TypeScript 기준으로 폴더 구조와 환경 변수 파일을 먼저 고정한다.

create-next-app

MongoDB URI를 서버 환경 변수로 두고 connection 재사용 로직을 만든다.

server only

Mongoose schema와 model을 정의하고 개발용 seed 데이터로 화면을 검증한다.

schema + seed

목록 fetch, 동적 라우트 상세, 없는 id 처리, 로딩 UI를 한 흐름으로 연결한다.

라우트 흐름

환경 변수

DB URI는 NEXT_PUBLIC 없이 서버 전용으로 둔다. 클라이언트 번들에 연결 문자열이 섞이지 않아야 한다.

.env.local

모델

schema는 화면 타입과 API 응답 shape의 기준이 된다. 날짜, ObjectId, optional 필드는 변환 규칙을 명확히 둔다.

Mongoose

라우팅

목록은 컬렉션 조회, 상세는 params 기반 단건 조회로 나눈다. notFound, loading, error 경계를 함께 만든다.

App Router

연결 재사용 개발 HMR에서 DB connection이 무한히 늘지 않는다.

시드 재현 새 환경에서도 같은 seed로 목록과 상세 화면을 확인할 수 있다.

오류 경계 DB 실패와 없는 문서를 다른 사용자 상태로 보여준다.

create-next-app -> .env.local -> dbConnect() -> Mongoose model -> seed -> list page -> detail page