Розгортання додатків Next.js

Варіанти розгортання для Next.js

Next.js можна розгортати кількома способами, залежно від ваших потреб в інфраструктурі: Vercel (керована платформа від творців Next.js), Docker контейнери, Node.js сервери або статичний експорт.

Vercel (рекомендується)

Найпростіший варіант — створений командою Next.js:

bash

# Встановіть Vercel CLI
npm i -g vercel

# Розгортання
vercel

Особливості:

Нульова конфігурація
Автоматичний HTTPS і CDN
Edge Functions і Serverless
Попередні розгортання для кожної гілки
Аналітика та моніторинг

Розгортання Docker

Вихідний формат Standalone

javascript

// next.config.js
const nextConfig = {
  output: "standalone",
};

Dockerfile

dockerfile

# Багатостадійне збірка для мінімального розміру образу
FROM node:20-alpine AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci

FROM node:20-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
ENV NODE_ENV=production

# Копіюйте лише необхідні файли
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

EXPOSE 3000
CMD ["node", "server.js"]

bash

docker build -t my-nextjs-app .
docker run -p 3000:3000 my-nextjs-app

Node.js сервер

bash

# Збірка
npm run build

# Запустіть сервер у виробничому режимі
npm start
# або
node .next/standalone/server.js

Статичний експорт

Для повністю статичних сайтів (без серверних функцій):

javascript

// next.config.js
const nextConfig = {
  output: "export",
};

bash

npm run build
# Вихід у каталозі /out — розгорніть на будь-якому статичному хості
# (Netlify, GitHub Pages, S3 тощо)

Обмеження статичного експорту:

Немає Server Components
Немає SSR / ISR
Немає API Routes
Немає Middleware
Немає оптимізації зображень (без зовнішнього завантажувача)

Порівняння

Платформа	Найкраще для	Особливості
Vercel	Повні функції Next.js	Усі функції, нульова конфігурація
Docker	Користувацька інфраструктура	Повний контроль, будь-який хмарний сервіс
Node.js	Проста VPS хостинг	Прямий контроль сервера
Статичний експорт	Прості статичні сайти	Будь-який CDN/статичний хост
AWS Amplify	Екосистема AWS	Гарна підтримка Next.js
Cloudflare Pages	Edge-first	Edge runtime

Контрольний список для виробництва

Увімкніть reactStrictMode: true
Встановіть правильні змінні середовища
Налаштуйте images.remotePatterns для зовнішніх зображень
Налаштуйте моніторинг помилок (Sentry тощо)
Увімкніть стиснення (gzip/brotli)
Налаштуйте заголовки кешування
Налаштуйте кінцеву точку перевірки стану
Увімкніть HTTPS

Важливо:

Vercel забезпечує найкращий досвід роботи з Next.js з нульовою конфігурацією. Для самостійного хостингу використовуйте output: "standalone" з Docker для мінімального розміру образів і повної підтримки функцій. Використовуйте статичний експорт лише для простих сайтів, які не потребують серверних функцій. Завжди тестуйте вашу виробничу збірку локально перед розгортанням.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань