버셀 — 관련 콘텐츠 31건

Invalid src prop, next/image, remotePatterns | 외부 이미지가 깨지면 설정은 어디인가?

넥스트 이미지가 Invalid src를 내면 외부 주소 호스트가 remotePatterns에 없는 상태다. next.config.js의 images 칸에 프로토콜·호스트·경로를 맞추고 개발 서버를 다시 켠다. unoptimized는 최적화만 끈다. Next.js, 이미지 최적화, 카카오 CDN, 슈퍼베이스 스토리지, 버셀, 프론트엔드, 개발자 기준. 2026년 9월 Next.js 공식 문서.

504 Gateway Timeout, maxDuration, 스트리밍 | 응답이 끊기기 전에 어디를 자를까?

배포만 504면 함수가 라우트 최대 실행 초 안에 응답을 못 끝낸 상태다. 오류 이름의 함수 호출 시간 초과, maxDuration, 스트리밍 시계, after로 일을 자르는 순서를 본다. 한도만 키우지 말고 첫 바이트를 먼저 보낸다. Next.js, 버셀, 클라우드플레어, API, 함수, 개발자 기준. 2026년 9월 MDN, RFC 9110, 버셀 공식 문서.

502 Bad Gateway, 업스트림, 함수 타임아웃 | 버셀 로그에 함수는 성공인데 화면이 502면?

버셀 함수 로그는 성공인데 화면만 502면 업스트림 응답이 프록시에 유효하게 안 도착한 상태다. x-vercel-error의 NO_RESPONSE_FROM_FUNCTION, 첫 바이트 지연, 스트림 중단을 본다. 응답을 먼저 보내고 긴 일은 after로 뺀다. Next.js, 버셀, 클라우드플레어, API, 함수, 개발자 기준. 2026년 9월 MDN, RFC 9110, 버셀 공식 문서.

ETIMEDOUT, fetch failed, undici | 배포 함수에서만 타임아웃이면?

배포 함수에서만 fetch가 끊기면 로컬 회선이 빠른 게 아니라 함수 대기 한도와 아웃바운드 경로가 다르다. ETIMEDOUT과 undici fetch failed의 cause.code를 남기고, maxDuration·AbortSignal·리전을 맞춘다. 개발자, Node.js, 버셀, Next.js, 백엔드, API 기준. 2026년 8월 Node.js·MDN·버셀 문서.

error.tsx, not-found, global-error, digest | 없는 글인데 500이 뜨면?

없는 글인데 500이 뜨면 행이 없을 때 throw 한 것이다. notFound는 없음 칸을 열고, 에러 파일은 예기치 않은 예외만 받는다. 같은 폴더 레이아웃은 에러 파일이 안 감싸고, 프로덕션은 digest로 서버 로그와 맞춘다. 개발자, Next.js, 프론트엔드, React, API, 버셀 기준으로 404와 500 칸만 보고 폼 훅 글, 프록시 글과 자리를 섞지 않는다. 2026년 8월 공식 문서.

깃허브 환경, 필수 검토, 대기 타이머, 환경 시크릿 | 프로덕션 토큰이 프리뷰 잡에 열리면?

프리뷰 잡이 프로덕션 토큰을 읽으면 값이 저장소 시크릿에 있습니다. 깃허브 환경 시크릿은 그 환경을 적은 잡만 열고, 필수 검토와 대기 타이머는 무료, 프로, 팀의 공개 저장소에만 있습니다. 개발자, 깃허브, Next.js, 데브옵스, 클라우드, API, 백엔드, 버셀 기준으로 배포 잡이 여는 시크릿 칸만 보고 동시성 글, 오아이디씨 글과 자리를 섞지 않습니다. 2026년 8월 깃허브 공식 문서.

after, waitUntil, 응답 후 작업, 페이지뷰 | 문의 저장이 끝났는데 버튼이 안 풀리면?

문의 저장이 끝났는데 버튼이 안 풀리면 액션이 메일을 기다린 겁니다. Next.js after는 응답을 보낸 뒤에 로그와 페이지뷰를 돌리고, 버셀은 15.1부터 대기 유틸 대신 이 함수를 권합니다. 정적 페이지에서는 빌드 때 돕니다. 프론트엔드, React, 서버 액션, API, 개발자, 백엔드, 넥스트 기준으로 응답 뒤 칸만 보고 폼 훅 글, 캐시 헤더 글과 자리를 섞지 않습니다. 2026년 8월 넥스트, 버셀 공식 문서.

파일 업로드, 매직 바이트, 확장자, 용량 | 문의 첨부가 서버를 깨면?

문의 첨부는 확장자가 아니라 앞 바이트로 받습니다. 피엔지 서명과 제이펙 서명만 통과하고, 에스브이지는 스크립트가 돌아 거절합니다. 버셀 함수는 요청 본문 4.5메가에서 413입니다. 개발자, Next.js, 보안, API, 백엔드, 프론트엔드, 버셀 기준으로 이름과 용량 칸만 보고 턴스타일, 에스에스알에프 글과 자리를 섞지 않습니다. 2026년 8월 공식 문서.

캐시 컨트롤, s-maxage, 스테일 리밸리데이트, CDN | 배포 직후 옛 페이지가 남는 이유는?

배포 직후 옛 HTML이 남으면 브라우저 max-age부터 본다. 캐시 컨트롤, s-maxage, 스테일 리밸리데이트, public과 private, no-cache와 no-store, Vary, 해시 파일, 버셀 CDN을 프론트엔드, Next.js, 개발자, API, 클라우드 기준으로 같은 표에 둔다. 넥스트 fetch 재검증 글과 쿠키 글과 자리를 섞지 않는다.

바이브코딩 프로덕션 체크리스트 — AI 코드를 출시하기 전 점검 42개 항목

클로드 코드·커서·깃허브 코파일럿 같은 AI 코딩 도구로 만든 바이브코딩 MVP를 프로덕션에 배포하기 전 점검해야 할 42개 체크리스트를 6단계로 정리했다. 환경변수 미설정, 시크릿 하드코딩, 결제 API 프로덕션 키 미전환, N+1 쿼리, 인증 미들웨어 누락이 가장 자주 놓치는 항목이다. Next.js·버셀·Supabase 기반 프로젝트 기준으로 작성했으며 CI/CD 자동화 연결 방법도 포함한다.

한국 1인 개발자 AI 도구 스택 2026 — 무엇을 결제하고 무엇을 무료로 쓸까

한국 1인 개발자가 2026년에 쓸 만한 AI 도구 스택을 정리했습니다. 무엇을 결제하고, 무엇을 무료로 쓰고, 어떻게 조합할지를 기준으로 씁니다. 12사이트를 운영하는 운영하면서 실제로 사용 중인 도구 조합과, 각 도구를 선택한 이유를 공유합니다. 모든 도구를 써야 한다는 게 아닙니다. 본인 작업 패턴에서 시작점을 찾는 데 쓰시기 바랍니다. ※ 2026년 5월 기준. 한국 결제 실금액(부가가치세 포함) 기준으로 작성했습니다.