# Next.js 배포 및 프로덕션 (React / Next.js)

> Vercel 배포, Docker, 환경 변수, 캐싱 전략, 모니터링, logging

- 20 면접 질문
- Senior
- [면접 질문: React / Next.js](https://sharpskill.dev/ko/technologies/react-next/interview-questions.md)

## 1. Next.js 배포 컨텍스트에서 Vercel Platform이란 무엇인가요?

**답변**

Vercel Platform은 Next.js를 위해 특별히 설계된 클라우드 네이티브 플랫폼으로, 프레임워크 자동 감지를 통한 zero-config 배포를 제공합니다. 이 플랫폼은 빌드를 자동으로 최적화하고, 글로벌 Edge Network를 구성하며, 수동 설정 없이 지능형 캐싱을 활성화합니다. AWS나 Azure 같은 범용 솔루션과 달리, Vercel은 ISR, Middleware, Server Components 등 Next.js 기능에 최적화되어 최고의 성능을 제공합니다.

## 2. Next.js에서 브라우저에 환경 변수를 노출하는 방법은?

**답변**

NEXT_PUBLIC_ 접두사가 있는 변수는 빌드 시 자동으로 클라이언트에 노출되어 JavaScript 번들에 포함됩니다. 이 접두사가 없는 변수는 엄격히 서버 측에 유지되며 절대 브라우저로 전송되지 않아 시크릿 보안을 보장합니다. 이 구분을 통해 Stripe 개인 키 같은 민감한 시크릿을 보호하면서 NEXT_PUBLIC_STRIPE_KEY 같은 공개 API 키를 관리할 수 있습니다.

## 3. Next.js 프로덕션 빌드를 생성하는 명령어는?

**답변**

next build 명령어는 코드 압축, 이미지 최적화, 정적 페이지 생성, 에셋 번들링을 포함한 최적화된 프로덕션 버전의 애플리케이션을 생성합니다. 이 단계는 최적화된 모든 파일이 포함된 .next 폴더를 생성하므로 배포 전에 필수적입니다. next start 명령어는 이 최적화된 빌드를 사용하여 프로덕션 서버를 실행합니다.

## 17개 추가 질문 이용 가능

- Next.js를 컨테이너화하기 위한 기반 Docker 이미지는?
- Vercel에서 환경 변수를 설정하는 곳은?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 React / Next.js 면접 주제

- [JavaScript 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/javascript-essentials.md): 25개 질문, Junior
- [React 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-fundamentals.md): 20개 질문, Junior
- [React Hooks](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-hooks.md): 22개 질문, Junior
- [컴포넌트 라이프사이클](https://sharpskill.dev/ko/technologies/react-next/interview-questions/component-lifecycle.md): 18개 질문, Junior
- [React Router](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-router.md): 20개 질문, Junior
- [Context를 활용한 상태 관리](https://sharpskill.dev/ko/technologies/react-next/interview-questions/state-management-context.md): 18개 질문, Junior
- [폼과 Controlled Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/forms-controlled-components.md): 20개 질문, Mid-Level
- [데이터 가져오기 및 API](https://sharpskill.dev/ko/technologies/react-next/interview-questions/fetching-data-api.md): 20개 질문, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-query-tanstack.md): 20개 질문, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/ko/technologies/react-next/interview-questions/styling-css-in-js.md): 18개 질문, Mid-Level
- [Next.js 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25개 질문, Mid-Level
- [TypeScript와 React](https://sharpskill.dev/ko/technologies/react-next/interview-questions/typescript-react.md): 20개 질문, Mid-Level
- [Next.js 데이터 페칭](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24개 질문, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-server-actions.md): 20개 질문, Mid-Level
- [Next.js 라우팅 및 내비게이션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22개 질문, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-api-routes.md): 20개 질문, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18개 질문, Mid-Level
- [Next.js Middleware 및 Auth](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22개 질문, Mid-Level
- [React 테스트](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-testing.md): 20개 질문, Mid-Level
- [Zustand State Management](https://sharpskill.dev/ko/technologies/react-next/interview-questions/zustand-state-management.md): 18개 질문, Mid-Level
- [React 성능 최적화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-performance-optimization.md): 22개 질문, Senior
- [Error Boundaries & 에러 핸들링](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-error-boundaries.md): 18개 질문, Senior
- [Advanced React Patterns](https://sharpskill.dev/ko/technologies/react-next/interview-questions/advanced-react-patterns.md): 20개 질문, Senior
- [Next.js 고급 기능](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24개 질문, Senior
- [아키텍처 & 디자인 패턴](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-architecture-patterns.md): 22개 질문, Senior
- [React Server Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-server-components.md): 26개 질문, Senior
- [Next.js 국제화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-internationalization.md): 20개 질문, Senior
- [React 보안 & 모범 사례](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-security-best-practices.md): 22개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-deployment-production