한 줄로

HTML, CSS, JavaScript만으로 사이트를 만들고 Supabase에 연결한 뒤 Vercel에 올릴 수 있다. Next.js 강좌의 서버 절차를 그대로 가져오지는 못한다. 서버의 Java가 HTML을 만들어 보내는 방식은 Spring Boot에 있다. 이 HTML을 나중에 Next.js 페이지로 옮기는 순서와 요청 문장은 Next.js · 정적 변환에 있다.

그대로인 것

• 표, SQL, RLS는 PostgreSQL과 Supabase · 읽기·쓰기와 같다. 프로젝트도 하나면 된다.
• 코드 이력은 GitHub다. main에 푸시하는 명령은 같다.
• Vercel이 그 저장소를 받아 주소로 연다. main은 운영, 다른 브랜치는 미리보기다.

바뀌는 것

자리	Next.js	정적 HTML·CSS·JS
화면	React 컴포넌트, App Router	index.html, style.css, app.js
데이터 호출	서버 클라이언트. HTML을 만들 때 행을 넣음	브라우저의 createClient. 페이지가 열린 뒤 목록을 채움
키	.env.local과 Vercel 환경 변수. 빌드가 NEXT_PUBLIC_를 묶음에 넣음	빌드가 없다. publishable 키를 app.js에 둔다. 페이지 소스에 보인다
secret 키	서버 환경 변수에만 둠	둘 곳이 없다. 정적 파일에 넣으면 방문자에게 공개된다
로그인 유지	쿠키와 proxy.js	브라우저 localStorage. 갱신 파일이 필요 없다
Vercel 설정	Framework Preset Next.js, npm run build	Preset Other, 빌드 명령은 비움

이 묶음에서 다루는 것

단원	내용
파일	세 파일의 역할, 다른 HTML로 이동
데이터베이스	CDN으로 클라이언트를 만들고 행을 읽고 씀
배포	GitHub에 올리고 Vercel Other로 연다

이 학습 허브가 이 형태다. HTML을 브라우저가 바로 연다. 허브에는 데이터베이스 호출이 없고, 아래 단원은 그 호출을 붙일 때의 순서를 적는다.