Next.js를 Vercel에 배포하는 완벽 가이드: 환경 변수, 도메인 설정, 성능 모니터링

브라우저에는 Vercel의 500 오류 페이지가 떠 있습니다. 환경 변수를 분명 Vercel Dashboard에 설정했는데 API가 왜 계속 undefined를 반환할까요? .env.local을 세 번 확인하고 두 번 다시 배포했으며 브라우저 캐시까지 비웠지만 여전히 해결되지 않았습니다.

30분이 지나서야 문제가 NEXT_PUBLIC_ 접두사에 있다는 것을 알아냈습니다.

비슷한 상황을 겪어 본 적이 있나요? 로컬에서는 잘 실행되던 Next.js 프로젝트가 Vercel에 배포하기만 하면 이상한 문제가 연달아 생깁니다. 환경 변수가 적용되지 않고, 사용자 지정 도메인을 한참 설정해도 404가 뜨며, SSL 인증서 오류 때문에 무한 리디렉션이 발생하기도 합니다.

Vercel의 배포 과정은 확실히 간단하지만, ‘간단하다’와 ‘함정이 없다’는 전혀 다른 이야기입니다. 세부 설정에 숨어 있는 함정은 사람을 종종 미치게 합니다. 이 글에서는 가장 기본적인 원클릭 배포부터 환경 변수를 올바르게 설정하는 법, 사용자 지정 도메인 연결, 성능 모니터링까지 Next.js를 Vercel에 배포하는 전체 과정을 안내합니다. 문서에는 나오지 않지만 반드시 마주치게 될 함정도 빠짐없이 짚어 보겠습니다.

기본 배포(5분 만에 공개)

원클릭 배포를 제대로 하는 방법

Vercel의 배포 과정은 정말 간단합니다. 코드를 GitHub에 푸시하고 Vercel을 연결한 다음 몇 번 클릭하면 끝입니다. 하지만 이 ‘간단함’ 뒤에는 적지 않은 세부 사항이 숨어 있습니다.

가장 기본적인 과정부터 살펴보겠습니다. 먼저 Next.js 프로젝트를 Git 저장소에 푸시해야 합니다(GitHub, GitLab, Bitbucket 모두 가능). 그런 다음 vercel.com을 열고 GitHub 계정으로 로그인한 뒤 ‘Import Project’를 클릭합니다.

Vercel은 저장소를 자동으로 스캔합니다. Next.js 프로젝트를 감지하면 빌드 명령과 출력 디렉터리도 자동으로 설정하므로 거의 손댈 필요가 없습니다.

Build Command: next build
Output Directory: .next
Install Command: npm install

Deploy를 클릭하고 1~2분 기다리면 your-project.vercel.app URL을 받게 됩니다. 이때 Vercel은 정적 자원(JS, CSS, 이미지)을 이미 Edge Network에 배포해 둡니다. 글로벌 CDN 가속을 별도 설정 없이 바로 사용할 수 있습니다.

하지만 초보자가 놓치기 쉬운 세부 사항이 있습니다. package.json을 확인하세요.

build 스크립트가 next build가 아니거나 의존성에 next, react, react-dom이 빠져 있으면 배포가 바로 실패합니다. build 스크립트를 webpack으로 작성해 아무리 해도 배포되지 않다가 Vercel이 Next.js를 전혀 찾지 못했다는 사실을 뒤늦게 알아낸 사례도 보았습니다.

DPS 워크플로도 있습니다. Develop, Preview, Ship을 줄인 말이라 그럴듯하게 들리지만 실제로는 다음과 같습니다.

• Develop: 로컬 개발, npm run dev
• Preview: Pull Request를 만들거나 기본 브랜치가 아닌 다른 브랜치에 푸시하면 Vercel이 테스트용 미리보기 URL을 자동 생성
• Ship: main 브랜치에 병합하면 Vercel이 프로덕션 환경에 자동 배포

이 방식은 정말 유용합니다. 예를 들어 새 기능을 개발하고 PR을 올리면 Vercel이 your-project-git-feature-branch.vercel.app 링크를 자동 생성합니다. 프로덕션 환경에는 전혀 영향을 주지 않으면서 제품 관리자나 QA 담당자에게 링크를 바로 보내 결과를 확인하게 할 수 있습니다.

배포 후 가장 먼저 할 일: 빌드 로그 확인

배포에 성공했다고 바로 기뻐하지는 마세요. Vercel Dashboard를 열고 프로젝트로 들어간 다음 ‘Deployments’ 탭에서 가장 최근 배포를 선택합니다.

상세한 빌드 로그가 표시됩니다. 여기서 다음 정보를 확인할 수 있습니다.

1. 의존성 설치 시간: 1분을 넘으면 node_modules가 너무 크거나 네트워크가 느릴 수 있습니다.
2. 빌드 과정의 경고 여부: TypeScript 타입 오류나 ESLint 규칙 경고 등이 있는지 확인합니다.
3. 생성된 정적 페이지 수: Next.js는 어떤 페이지가 SSG(Static Site Generation)이고 어떤 페이지가 SSR(Server-Side Rendering)인지 알려 줍니다.

제가 처음 배포했을 때 빌드 로그에는 TypeScript 오류가 잔뜩 표시되었는데도 배포는 성공했습니다. 나중에야 Vercel이 기본적으로 TypeScript 오류 때문에 배포를 중단하지 않는다는 사실을 알았습니다. next.config.js에서 typescript.ignoreBuildErrors: false를 활성화한 경우는 예외입니다.

또 놓치기 쉬운 점이 있습니다. 빌드 성공이 페이지의 정상 작동을 보장하지는 않습니다.

배포에는 성공했지만 페이지를 열면 500 오류가 표시되던 사례가 있었습니다. 결국 API 라우트에서 Node.js의 fs 모듈로 로컬 파일을 읽은 것이 원인이었습니다. Edge Functions는 파일 시스템 작업을 전혀 지원하지 않습니다. Vercel의 서버리스 함수(Serverless Functions)는 격리되어 있고 요청마다 독립된 환경에서 실행되므로 파일이 계속 남아 있을 것이라고 기대해서는 안 됩니다.

환경 변수 설정(가장 실수하기 쉬운 부분)

환경 변수의 세 가지 수준

이제 핵심입니다. 환경 변수는 상당히 헷갈리는 부분이라 저도 처음 설정할 때 여기서 30분 동안 막혔습니다.

Vercel은 환경을 Production(프로덕션), Preview(미리보기), Development(개발)의 세 가지로 나눕니다. 간단히 말하면 다음과 같습니다.

• Production: 사용자가 접속하는 정식 환경으로 main 브랜치에 해당합니다.
• Preview: PR을 올리거나 다른 브랜치에 푸시할 때 Vercel이 자동 생성하는 테스트 환경입니다.
• Development: 로컬에서 npm run dev를 실행하는 환경입니다.

이 세 환경에는 서로 다른 변수를 설정할 수 있습니다. 예를 들어 데이터베이스 연결 문자열은 프로덕션 환경에서는 실제 데이터베이스를, 미리보기 환경에서는 테스트 데이터베이스를, 개발 환경에서는 로컬 데이터베이스를 사용하도록 구성할 수 있습니다.

로컬 개발 환경은 어떻게 설정할까요?

프로젝트 루트 디렉터리에 .env.local 또는 .env.development를 만듭니다.

# .env.local
DATABASE_URL=postgresql://localhost:5432/mydb
API_KEY=your-api-key-here

.env.local은 Git에서 무시됩니다(.gitignore에 추가했는지 확인하세요). 이렇게 하면 API key가 코드 저장소에 유출되지 않습니다.

Vercel 배포 환경은 어떻게 설정할까요?

Vercel Dashboard를 열고 프로젝트에 들어간 다음 Settings → Environment Variables로 이동합니다.

여기에는 Production, Preview, Development라는 세 개의 체크박스가 있습니다. 선택한 환경에서 해당 변수가 적용됩니다.

Alibaba Cloud - 개발자 클라우드 1순위, Lighthouse 서버 15% 할인

15% 할인 받기 →광고

예를 들어 프로덕션 환경에서만 사용할 데이터베이스 연결 문자열을 설정하려면 다음과 같이 입력합니다.

Name: DATABASE_URL
Value: postgresql://prod-server:5432/prod-db
Environment: ✅ Production

저장한 뒤 다시 배포하면 변수가 적용됩니다.

흔한 함정: 설정한 뒤 다시 배포하지 않는 것.

Vercel은 자동으로 다시 배포하지 않습니다. 환경 변수를 수정했다면 배포를 수동으로 한 번 실행하거나 코드를 한 번 푸시해야 변수가 런타임 환경에 반영됩니다.

클라이언트 변수와 서버 변수

가장 골치 아픈 부분입니다. 제가 새벽 3시에 빠졌던 함정도 바로 이것입니다.

Next.js 환경 변수는 두 가지로 나뉩니다.

1. 서버 변수: 서버 코드(API 라우트, getServerSideProps, getStaticProps)에서만 접근할 수 있습니다.
2. 클라이언트 변수: NEXT_PUBLIC_ 접두사를 붙여야 하며 브라우저의 JS 코드에 인라인됩니다.

예를 들어 다음과 같습니다.

# 서버 변수(안전)
DATABASE_URL=postgresql://...
API_SECRET_KEY=abc123

# 클라이언트 변수(노출됨)
NEXT_PUBLIC_API_BASE_URL=https://api.example.com
NEXT_PUBLIC_SITE_NAME=My Site

DATABASE_URL과 API_SECRET_KEY는 서버에서만 접근할 수 있고 브라우저에서는 가져올 수 없습니다. 반면 NEXT_PUBLIC_API_BASE_URL은 JS 파일에 직접 컴파일되므로 누구나 브라우저 콘솔을 열어 볼 수 있습니다.

제가 겪었던 문제는 이랬습니다.

클라이언트에서 서드파티 인터페이스를 호출할 때 필요한 API key가 있었습니다. 처음에는 NEXT_PUBLIC_ 접두사를 붙이지 않아 브라우저에서 계속 undefined 오류가 발생했습니다.

나중에 접두사를 붙이자 API key는 제대로 작동했습니다. 하지만 브라우저 코드에 그대로 노출되었습니다. 누구든 DevTools를 열고 NEXT_PUBLIC_을 검색하면 제 key를 한눈에 볼 수 있었습니다.

올바른 방법은 무엇일까요?

클라이언트에서 서드파티 API를 직접 호출하지 마세요. 요청을 Next.js API 라우트에 넣습니다.

// app/api/data/route.ts (서버)
export async function GET() {
  const res = await fetch('https://api.example.com', {
    headers: {
      'Authorization': `Bearer ${process.env.API_SECRET_KEY}` // 안전
    }
  })
  return res.json()
}

// app/page.tsx (클라이언트)
const data = await fetch('/api/data') // 자체 API를 호출하므로 key가 노출되지 않음

이렇게 하면 API key는 서버에서만 사용되며 브라우저에는 절대 유출되지 않습니다.

한 가지 세부 사항이 더 있습니다. NEXT_PUBLIC_ 변수는 런타임이 아니라 빌드 시점에 인라인됩니다. 즉, 변수를 수정했다면 반드시 다시 build해야 적용됩니다.

환경 변수 동기화 팁

팀으로 협업할 때 환경 변수는 번거로운 문제입니다. .env.local을 Git에 커밋할 수는 없지만, 새 팀원이 코드를 clone한 뒤 어떤 변수를 설정해야 하는지 알기 어렵습니다.

Vercel은 다음 명령을 제공합니다.

vercel env pull .env.local

이 명령은 Vercel에 설정한 Development 유형의 환경 변수를 로컬 .env.local 파일로 가져옵니다.

먼저 Vercel CLI를 설치해야 합니다.

npm i -g vercel
vercel link  # 프로젝트 연결
vercel env pull

다만 이 명령은 Development 환경 변수만 가져옵니다. 보안을 위해 Production과 Preview 변수는 가져오지 않습니다.

또 다른 팁: .env.example을 템플릿으로 사용하세요.

프로젝트 루트 디렉터리에 .env.example을 만들고 필요한 변수 이름만 나열합니다(값은 작성하지 않습니다).

# .env.example
DATABASE_URL=
API_KEY=
NEXT_PUBLIC_API_BASE_URL=

이 파일을 Git에 커밋합니다. 새 팀원은 코드를 clone한 뒤 파일을 복사해 .env.local로 이름을 바꾸고 자신의 값을 입력하면 됩니다.

Vercel 환경 변수의 전체 크기 제한은 64KB이며 Edge Function에서는 변수 하나당 5KB로 제한됩니다. 일반적인 프로젝트는 이 제한을 넘지 않지만 JWT 공개 키나 base64 인코딩 이미지 등을 저장하려 하면 문제가 될 수 있습니다.

사용자 지정 도메인 설정

도메인 연결 3단계

your-project.vercel.app 같은 도메인은 너무 아마추어처럼 보이고 *.vercel.app은 중국 내에서 이미 차단되어 있습니다. 중국 내 사용자도 정상적으로 접속하게 하려면 자체 도메인 연결이 필수입니다.

1단계: Vercel에 도메인 추가

Vercel Dashboard를 열고 프로젝트로 이동한 다음 Settings → Domains를 선택합니다.

‘Add’를 클릭하고 도메인(예: example.com 또는 blog.example.com)을 입력한 뒤 Add를 클릭합니다.

Vercel이 도메인을 감지하고 설정해야 하는 DNS 레코드를 알려 줍니다.

2단계: DNS 설정

A 레코드와 CNAME 레코드, 두 가지 방법이 있습니다.

루트 도메인(example.com)을 연결하려면 다음과 같이 설정합니다.

Type: A
Name: @
Value: 76.76.21.21

하위 도메인(blog.example.com)을 연결하려면 다음과 같이 설정합니다.

Type: CNAME
Name: blog
Value: cname.vercel-dns.com

중국 내 사용자를 위한 특별 설정:

사용자가 주로 중국 내에 있다면 cname.vercel-dns.com 대신 cname-china.vercel-dns.com을 사용하는 것이 좋습니다. Vercel이 중국 본토에 맞게 특별히 최적화한 CNAME 주소입니다.

Type: CNAME
Name: blog
Value: cname-china.vercel-dns.com

또는 중국 내 접속에 유리한 IP를 가리키도록 A 레코드를 설정할 수 있습니다.

Type: A
Name: @
Value: 76.223.126.88 또는 76.76.21.98

DNS 설정을 마친 뒤 몇 분에서 수십 분 정도 기다리면(DNS 제공 업체에 따라 다름) Vercel이 설정 적용 여부를 자동으로 감지합니다.

3단계: 검증

Vercel Dashboard로 돌아가 페이지를 새로고침합니다. 도메인 옆에 초록색 ‘Valid Configuration’이 표시되면 설정에 성공한 것입니다.

KiloClaw - 기업용 매니지드 OpenClaw, AI Agent 오케스트레이션 및 스마트 라우팅

시작하기 →광고

브라우저를 열고 도메인에 접속하면 Next.js 프로젝트가 표시되어야 합니다.

흔한 함정: 잘못된 DNS 설정.

CNAME의 Name에 blog 대신 전체 도메인(blog.example.com)을 입력한 사례도 보았습니다. 결국 DNS 조회에 실패해 도메인이 계속 적용되지 않았습니다.

A 레코드의 IP를 잘못 입력하거나 DNS 제공 업체의 캐시가 갱신되지 않아 30분을 기다려도 계속 404가 표시되는 경우도 있습니다.

SSL 인증서 자동 설정

좋은 소식은 Vercel이 SSL 인증서(Let’s Encrypt)를 자동으로 신청해 준다는 점입니다. 추가 설정을 전혀 하지 않아도 HTTPS를 사용할 수 있습니다.

도메인 설정이 적용되면 Vercel이 인증서를 자동으로 신청하며 보통 몇 분 정도 걸립니다. Domains 페이지에 ‘Certificate Status: Provisioning’이 표시되고 잠시 뒤 ‘Active’로 바뀝니다.

인증서 발급에 성공한 뒤 https://example.com에 접속하면 자물쇠 아이콘을 확인할 수 있습니다.

하지만 인증서 불일치로 무한 리디렉션이 발생하는 함정이 있습니다.

루트 도메인(example.com)과 www 하위 도메인(www.example.com)을 함께 설정하면 Vercel은 기본적으로 둘 중 하나를 다른 하나로 리디렉션합니다.

하지만 DNS 설정에 문제가 있거나 SSL 인증서가 둘 중 하나에만 발급되었다면 브라우저가 http://example.com과 https://www.example.com 사이를 계속 오가는 무한 리디렉션이 발생합니다.

해결 방법: Vercel에 example.com과 www.example.com을 모두 추가하고 두 도메인의 DNS도 올바르게 설정했는지 확인하세요.

일부 DNS 제공 업체에서는 SSL/TLS 설정을 ‘완전 암호화’ 모드로 활성화해야 합니다. ‘유연한 암호화’로 설정하면 인증서가 일치하지 않을 수 있습니다.

SSL 설정이 적용되었는지 어떻게 확인할까요?

브라우저에서 https://example.com에 접속해 주소 표시줄의 자물쇠 아이콘을 클릭하고 인증서 상세 정보를 확인합니다. ‘Issued by: Let’s Encrypt’가 표시되면 인증서가 정상적으로 설정된 것입니다.

명령줄에서도 확인할 수 있습니다.

curl -I https://example.com

반환된 HTTP 상태 코드가 200인지, Strict-Transport-Security 헤더(HSTS)가 있는지 확인하세요.

하위 도메인 및 다중 도메인 전략

www와 루트 도메인 양쪽 설정

많은 사람이 example.com과 www.example.com을 함께 설정한 뒤 둘 중 하나를 다른 하나로 리디렉션합니다.

Vercel에서는 Domains 페이지에 두 도메인을 추가하면 리디렉션을 자동으로 처리합니다. Settings에서 ‘Primary Domain’을 선택하면 다른 도메인은 기본 도메인으로 자동 리디렉션됩니다.

다국어 사이트의 도메인 전략

Next.js 프로젝트가 다국어(i18n)를 지원한다면 언어별로 다른 하위 도메인을 연결할 수 있습니다.

• en.example.com → 영어 버전
• zh.example.com → 중국어 버전
• ja.example.com → 일본어 버전

Vercel의 Settings → Domains에서 각 하위 도메인을 추가한 다음 next.config.js에 i18n을 설정합니다.

module.exports = {
  i18n: {
    locales: ['en', 'zh', 'ja'],
    defaultLocale: 'en',
    domains: [
      { domain: 'en.example.com', defaultLocale: 'en' },
      { domain: 'zh.example.com', defaultLocale: 'zh' },
      { domain: 'ja.example.com', defaultLocale: 'ja' },
    ],
  },
}

Preview 브랜치에 독립 도메인 연결

미리보기 환경(예: staging 브랜치)에 독립 도메인을 연결하려면 Domains 페이지에서 staging.example.com을 추가하고 ‘Git Branch’를 staging으로 선택합니다.

이렇게 하면 staging 브랜치에 코드를 푸시할 때마다 Vercel이 프로덕션 환경에 영향을 주지 않고 staging.example.com에 자동으로 배포합니다.

성능 모니터링 및 최적화

Vercel Analytics와 Speed Insights

배포를 마쳤다면 페이지가 빠르게 로드되는지, 사용자 경험은 어떤지, 성능 병목은 없는지 궁금할 것입니다.

Vercel은 두 가지 무료 분석 도구를 제공합니다. Analytics(사용자 행동 분석)와 Speed Insights(성능 분석)입니다.

Speed Insights 빠르게 연결하기

Next.js App Router(Next.js 13+)를 사용한다면 연결은 아주 간단합니다.

npm install @vercel/speed-insights

그런 다음 루트 레이아웃에 한 줄을 추가합니다.

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  )
}

배포가 끝나면 Vercel Dashboard의 ‘Speed Insights’ 탭에서 데이터 수집을 시작합니다.

Core Web Vitals 모니터링

Speed Insights는 Google이 정의한 세 가지 핵심 성능 지표를 자동으로 추적합니다.

1. FCP (First Contentful Paint): 페이지에 콘텐츠가 처음 렌더링되기까지 걸리는 시간. 권장값 < 1.8s
2. LCP (Largest Contentful Paint): 가장 큰 콘텐츠가 표시되기까지 걸리는 시간. 권장값 < 2.5s
3. CLS (Cumulative Layout Shift): 페이지 레이아웃 안정성. 권장값 < 0.1

이 데이터는 실험실 데이터가 아니라 실제 사용자의 브라우저에서 수집됩니다(Real User Monitoring). 지역, 기기, 브라우저에 따른 성능 차이도 확인할 수 있습니다.

Speed Insights를 바탕으로 성능을 조정하는 방법

Vultr - 고성능 NVMe 클라우드 서버, 전 세계 32개 노드, Docker 원클릭 배포

요금 보기 →광고

예를 들어 보겠습니다. 예전에 진행한 한 프로젝트에서는 Speed Insights의 LCP가 계속 4초 정도로 나타나 권장값인 2.5초를 크게 넘었습니다.

상세 정보를 열어 보니 홈페이지의 Hero 이미지가 문제였습니다. 2MB 크기의 PNG 이미지가 압축되지 않은 채로 있었고 Next.js의 <Image> 컴포넌트도 사용하지 않았습니다.

이미지를 WebP 형식으로 바꾸고 next/image 컴포넌트로 자동 처리하자 LCP가 바로 1.8초까지 내려갔습니다. Speed Insights 점수도 60점에서 95점으로 올랐습니다.

이것이 실제 사용자 데이터의 가치입니다. 실험실 점수가 아무리 높아도 실제 사용자의 경험 데이터보다 정확하지는 않습니다.

Analytics로 사용자 행동 확인하기

Vercel Analytics에서는 다음 정보를 확인할 수 있습니다.

• 방문 수가 가장 많은 페이지
• 사용자가 유입된 경로(트래픽 소스)
• 지역별 방문 분포
• 이탈률이 높은 페이지

이 기능은 개인 프로젝트에서 무료로 제공되며(월 10만 회 페이지 뷰) 상업용 프로젝트에서는 유료입니다.

고급 설정

사용자 지정 빌드 명령

프로젝트의 빌드 과정이 특별하다면 Vercel Dashboard → Settings → Build & Development Settings에서 빌드 명령을 사용자 지정할 수 있습니다.

예를 들어 npm 대신 pnpm을 사용한다면 다음과 같이 설정합니다.

Build Command: pnpm build
Install Command: pnpm install

빌드 전에 스크립트를 실행해야 한다면 다음과 같이 설정합니다.

Build Command: npm run prebuild && npm run build

Edge Functions와 Edge Middleware

Vercel은 전 세계 엣지 노드에서 코드를 실행하는 Edge Functions를 지원하며 기존 Serverless Functions보다 응답 속도가 훨씬 빠릅니다.

Next.js 프로젝트에서 Middleware를 사용하면 Vercel이 이를 Edge Middleware로 자동 배포합니다. 인증, 리디렉션, A/B 테스트 등을 원본 서버까지 요청하지 않고 엣지 노드에서 처리할 수 있습니다.

// middleware.ts
import { NextResponse } from 'next/server'

export function middleware(request) {
  if (!request.cookies.get('token')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
}

Serverless Functions 시간 제한 설정

Vercel Serverless Functions의 기본 시간 제한은 무료 요금제에서 10초입니다. API 라우트에서 시간이 오래 걸리는 작업(서드파티 API 호출, PDF 생성 등)을 처리하면 시간 제한을 초과할 수 있습니다.

유료 요금제에서는 60초까지 연장할 수 있습니다. 또는 시간이 오래 걸리는 작업을 백그라운드 대기열(예: Inngest, Trigger.dev)에 넣어 HTTP 요청을 막지 않게 할 수 있습니다.

배포 보호: 미리보기 환경 비밀번호 설정

미리보기 환경(Preview)을 공개하고 싶지 않다면 Settings → Deployment Protection에서 비밀번호 보호를 활성화할 수 있습니다.

‘Password Protection for Previews’를 선택하고 비밀번호를 설정합니다. 이후 미리보기 URL에 접속하면 비밀번호를 입력해야 페이지를 볼 수 있습니다.

민감한 데이터나 완성되지 않은 기능을 보호할 때 특히 유용합니다.

마무리

여기까지 읽었다면 이제 Next.js를 Vercel에 배포하는 전체 과정을 명확히 이해했을 것입니다.

가장 기본적인 원클릭 배포부터 환경 변수의 세 가지 수준, 사용자 지정 도메인 연결과 SSL 인증서, 그리고 성능 모니터링과 고급 설정까지 모두 실제 프로젝트에서 반드시 만나게 될 문제입니다.

환경 변수는 확실히 복잡하지만 핵심 원칙만 기억하면 됩니다. 서버 변수에는 접두사를 붙이지 않고, 클라이언트 변수에는 NEXT_PUBLIC_ 접두사를 붙이며, API key는 절대 클라이언트에 노출하지 않습니다. 이 함정은 제가 먼저 겪어 보았습니다.

도메인 설정은 간단해 보이지만 DNS 세부 사항에서 오류가 나기 쉽습니다. 특히 중국 내 사용자를 대상으로 한다면 cname-china.vercel-dns.com 또는 76.76.21.21처럼 중국 내 접속에 최적화된 주소를 사용해야 합니다. 그렇지 않으면 사이트가 차단될 수 있습니다.

성능 모니터링에서는 Speed Insights가 정말 유용합니다. 실제 사용자 데이터가 실험실 점수보다 훨씬 정확합니다. LCP가 2.5초를 넘는다면 이미지, 글꼴, 첫 화면 렌더링부터 확인하세요. 작은 조정 하나로 점수가 30점 오르는 경우도 많습니다.

이제 Next.js를 Vercel에 배포하는 전체 과정을 익혔습니다. 터미널을 열어 첫 프로젝트를 GitHub에 푸시하고 Vercel을 연결해 자동 배포가 끝나는 순간을 직접 지켜보세요. 그 성취감이라면 이 글을 읽은 10분이 전혀 아깝지 않을 것입니다.

문제가 생기면 댓글로 이야기해 주세요. 가능한 한 답변하겠습니다. 배포가 순조롭게 진행되길 바랍니다!