Next.js
바이브코딩으로 웹앱을 만들 때 가장 자주 만나는 프레임워크가 Next.js입니다. 무엇을 하는 도구인지부터 배포·SEO와 어떻게 맞물리는지까지, AI에게 코드를 맡기더라도 알아두면 좋은 내용을 담았습니다.
sitemap.xml이란? 검색엔진에 공개 페이지 목록을 알려주는 파일
sitemap.xml은 검색엔진에 검색 대상으로 삼고 싶은 대표 공개 URL 목록을 알려주는 파일이에요. 관리자·로그인·결제 결과·중복 URL은 빼고 실제 수정 날짜를 유지하며, 배포된 파일을 확인해 Search Console에 그 주소를 제출해야 합니다.
JSON-LD란? 검색엔진에게 웹페이지 내용을 설명하는 구조화 데이터
JSON-LD는 페이지의 종류·제목·작성자·날짜 같은 의미와 관계를 검색엔진이 이해하기 쉬운 구조로 설명하는 방식이에요. 보이는 본문을 대신하거나 순위를 보장하지 않으며 실제 내용과 일치하게 작성한 뒤 공식 검사 도구로 확인해야 합니다.
HTML 파일은 열면 되는데 웹앱은 왜 실행해야 하나요?
HTML 파일은 브라우저가 그대로 읽을 수 있지만 Next.js 같은 웹앱은 여러 파일과 패키지를 처리하고 서버 기능을 실행해야 해서 개발 서버가 필요해요. npm run dev는 코드를 브라우저가 사용할 형태로 만들고 localhost 주소에서 변경 결과를 보여줍니다.
Vercel 배포 주소를 내 도메인으로 바꾸는 방법 — DNS 연결 가이드
Vercel 배포 주소를 자체 도메인으로 바꾸려면 프로젝트에 도메인을 추가한 뒤 실제 DNS 관리 화면에 Vercel이 안내한 A·CNAME 레코드를 입력하면 됩니다. 프로젝트를 다시 만들거나 도메인을 Vercel로 이전할 필요는 없으며, DNS 전파와 HTTPS 발급이 끝나면 연결됩니다.
바이브코딩 기술 스택 추천: 처음 웹 애플리케이션을 만들 때 권하는 조합
처음 만드는 일반적인 웹 애플리케이션에는 TypeScript·Next.js·Tailwind CSS·Supabase PostgreSQL·Drizzle·Vercel 조합을 추천합니다. 화면·서버·데이터베이스·배포를 한 흐름으로 연결하고 로그인이나 이메일은 실제 기능이 필요할 때 추가하세요.
기술 스택이란? 바이브코딩을 시작할 때 먼저 정하는 기술 조합
기술 스택은 애플리케이션을 만드는 데 사용하는 기술 조합입니다. 언어·프레임워크·데이터베이스·배포가 각각 어떤 역할을 맡는지, 좋은 조합은 어떻게 고르는지 입문자 눈높이로 설명합니다.
배포 플랫폼은 어디가 좋을까요? Vercel·Netlify·Railway 비교
일반적인 Next.js 웹서비스는 Vercel, 웹페이지 중심 프로젝트는 Netlify, 계속 실행되는 별도 서버나 작업 프로그램은 Railway부터 검토하면 좋아요. 어느 플랫폼이 항상 우월한 것은 아니며 프로젝트의 실행 방식·팀 경험·비용 기준에 맞춰 골라야 합니다.
바이브코딩 SEO 기술 점검표: AI에게 꼭 확인시킬 12가지
AI가 SEO를 적용했다고 말해도 제목과 설명만 확인해서는 부족해요. 실제 배포 페이지의 응답·robots·noindex·canonical·사이트맵·내부 링크·구조화 데이터와 모바일 성능을 증거와 함께 점검하고 수정 뒤 프로덕션 빌드에서 다시 확인해야 해요.
바이브코딩에서 자꾸 나오는 Next.js는 도대체 뭔가요?
Next.js는 React를 바탕으로 화면과 서버 기능을 한 프로젝트에서 만들 수 있게 해주는 풀스택 웹 프레임워크예요. 예약·로그인·결제 같은 웹서비스에 유용하지만 데이터베이스와 인증, 배포까지 Next.js 하나가 모두 제공하는 것은 아니에요.
