[Next.js] 커스텀 도메인 연결

좋아. 아래는 커스텀 도메인 연결을 위해 Next.js 프로젝트, 도메인 구매 업체, Vercel에서 각각 해야 할 일을 정확하고 순차적으로 정리한 절차야.

---

✅ 최종 목표

사용자가 구매한 도메인 www.분양1.site로 접속하면
www.분양모아.com/분양1과 같은 콘텐츠가 자동 렌더링되도록 구성

---

🧭 전체 흐름 요약

1. Next.js 프로젝트에서 커스텀 도메인 요청 처리 준비
2. 사용자가 도메인 구매 업체에서 DNS 설정
3. 넌 Vercel에 도메인 등록 & SSL 연결
4. 사용자가 www.분양1.site로 접속 시 → bunyang1 콘텐츠 자동 렌더링

---

🛠️ 순서대로 정리

✅ 1. Next.js 프로젝트에서 해야 하는 일

단계 작업 설명

1-1	DB에 사용자 slug + customDomain 저장	예: slug: "bunyang1", domain: "www.분양1.site"
1-2	middleware.ts에서 host → slug로 rewrite 처리	www.분양1.site → your-app.com/bunyang1
1-3	[slug] 페이지 구성	/bunyang1으로 접속 시 SSR 렌더링
1-4	도메인 등록 API or Admin 페이지 구현	도메인 요청 수신 후 DB 저장 + Vercel 도메인 등록 트리거

---

✅ 2. 사용자가 도메인 구매 업체에서 해야 하는 일

단계 작업 설명

2-1	도메인 구매	예: www.분양1.site
2-2	DNS 레코드 설정	아래처럼 설정 안내해야 함

📌 DNS 설정값

항목 값

타입	CNAME
호스트	www
값	your-app.vercel.app

루트 도메인(bunyang1.site)도 원하면 A레코드 추가 필요:
@ → 76.76.21.21

---

✅ 3. Vercel에서 해야 하는 일 (1인 개발자인 너의 역할)

단계 작업 설명

3-1	Vercel 프로젝트 설정에서 사용자 도메인 등록	Settings → Domains → www.분양1.site 추가
3-2	Vercel이 자동으로 SSL 인증 처리 시작	DNS가 올바르게 연결되면 Let’s Encrypt 발급
3-3	(선택) API 사용 자동화	POST https://api.vercel.com/v9/projects/:id/domains 사용 가능

---

✅ 요약: 너와 사용자가 할 일 정리표

구분 주체 해야 하는 일

1️⃣	사용자	도메인 구매 + DNS 설정 (CNAME → your-app.vercel.app)
2️⃣	너 (Vercel)	도메인 수동 등록 or API 자동화
3️⃣	너 (Next.js)	middleware.ts에서 host → slug 매핑 + SSR 처리
4️⃣	너	도메인 → slug DB 저장 / 불일치 시 404 처리
5️⃣	결과	www.분양1.site 접속 시 → 분양1 콘텐츠 렌더링 완료

---

✅ 다음 단계 제안

• 네가 원하면 위 구조에 맞는 실제 middleware.ts + slug lookup 코드와
• Supabase DB 테이블 구조,
• Vercel 도메인 자동 등록 API 호출 예제까지 만들어줄 수 있어.

“코드 샘플까지 정리해줘”라고 말해주면 바로 이어서 작성할게.