dev.syw

빌드부터 Vercel·노드 서버 배포와 성능 최적화까지.

배포와 최적화

이제 만든 앱을 세상에 내보낼 차례입니다. Next.js는 빌드 한 번으로 정적·동적 페이지를 모두 준비하고, 이미지와 폰트를 자동으로 최적화합니다. 이번 마지막 레슨에서 배포 흐름과 성능 다듬기를 정리합니다.

학습 목표

  • next build 와 next start 로 프로덕션을 실행한다.
  • 환경 변수를 안전하게 다룬다.
  • next/image, next/font 로 자동 최적화를 적용한다.
  • 번들을 분석하고, Vercel·노드 서버에 배포한다.

빌드와 실행

개발은 next dev, 배포용은 next build 로 최적화된 결과물을 만든 뒤 next start 로 서버를 켭니다.

npm run build   # 프로덕션 빌드 (정적 생성·번들링)
npm run start   # 빌드 결과로 서버 실행 (기본 3000 포트)

빌드 로그에는 각 라우트가 정적(○)인지 동적(ƒ)인지 표시됩니다. 8강의 전략이 실제로 어떻게 적용됐는지 여기서 확인할 수 있습니다.

환경 변수

.env.local 에 비밀 값을 둡니다. 기본적으로 서버에서만 읽히며, 브라우저에 노출하려면 NEXT_PUBLIC_ 접두사가 필요합니다.

# .env.local
DATABASE_URL=postgres://...        # 서버 전용 (안전)
NEXT_PUBLIC_API_BASE=https://api.example.com  # 브라우저 노출됨

process.env.DATABASE_URL;          // 서버 컴포넌트/액션에서만
process.env.NEXT_PUBLIC_API_BASE;  // 어디서나

⚠️ 주의 — API 키·DB 비밀번호에는 절대 NEXT_PUBLIC_ 을 붙이지 마세요. 그 순간 브라우저 번들에 포함되어 누구나 볼 수 있습니다.

이미지 최적화 — next/image

<img> 대신 next/image 의 Image 를 쓰면 크기 조정, 지연 로딩, 최신 포맷(WebP) 변환을 자동으로 해 줍니다.

import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.png"
      alt="히어로 이미지"
      width={1200}
      height={600}
      priority // 첫 화면 핵심 이미지는 우선 로딩
    />
  );
}

💡 TIP — 외부 도메인 이미지를 쓰려면 next.config.js 의 images.remotePatterns 에 해당 도메인을 등록해야 합니다.

폰트 최적화 — next/font

next/font 는 폰트를 빌드 시 받아 셀프 호스팅하므로 외부 요청이 사라지고, 글꼴 깜빡임(layout shift)도 줄어듭니다.

// app/layout.tsx
import { Noto_Sans_KR } from 'next/font/google';

const noto = Noto_Sans_KR({ subsets: ['latin'], weight: ['400', '700'] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" className={noto.className}>
      <body>{children}</body>
    </html>
  );
}

번들 분석

무엇이 번들을 크게 만드는지 보려면 분석 도구를 씁니다.

npm install @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});
JavaScript
ANALYZE=true npm run build   # 브라우저로 번들 시각화 열림

배포

가장 쉬운 길은 Vercel 입니다. GitHub 저장소를 연결하면 푸시할 때마다 자동 빌드·배포됩니다. ISR, 이미지 최적화 등이 별도 설정 없이 동작합니다.

직접 노드 서버에 올릴 수도 있습니다. 빌드 후 next start 를 띄우거나, 컨테이너로 감쌉니다. 출력 모드를 standalone 으로 두면 의존성까지 묶인 최소 실행본이 만들어져 Docker 이미지가 가벼워집니다.

// next.config.js
module.exports = { output: 'standalone' };
JavaScript
방법특징
Vercel가장 간단, 푸시 시 자동 배포, ISR 기본 지원
노드 서버(next start)직접 운영, 자유로운 인프라
Docker(standalone)컨테이너 이식성, 가벼운 이미지

요약

  • next build → next start 로 프로덕션을 실행한다.
  • 비밀 값은 .env.local, 브라우저 노출 값만 NEXT_PUBLIC_ 을 붙인다.
  • next/image·next/font 로 이미지·폰트를 자동 최적화한다.
  • 번들 분석으로 무게를 줄이고, Vercel·노드 서버·Docker로 배포한다.

연습문제

  1. npm run build 를 실행하고 라우트별 정적/동적 표시(○/ƒ)를 읽어 보세요.
  2. .env.local 에 서버 전용 변수와 NEXT_PUBLIC_ 변수를 각각 두고 어디서 읽히는지 확인하세요.
  3. <img> 를 next/image 로 바꾸고 네트워크 탭에서 포맷·크기 변화를 관찰하세요.
  4. output: 'standalone' 을 켜고 빌드 산출물이 어떻게 달라지는지 살펴보세요.

힌트 — 비밀이 브라우저에 새는지 확인하려면 빌드된 JS에서 변수 값을 검색해 보세요. NEXT_PUBLIC_ 이 붙은 값만 보여야 정상입니다.

💡 연습문제 풀이

불러오는 중…

함께 보면 좋은 자료

📑 치트시트

🛠 자주 나는 에러

🧰 개발자 도구

✅ 복습 퀴즈

댓글 0

“Next.js” 강좌에 대한 댓글입니다.

댓글을 작성하려면 로그인이 필요합니다.