Vercel деплой Next.js: пошаговая инструкция по запуску проекта

Vercel деплой Next.js-проекта у меня обычно занимает 3-5 минут от git push до рабочего URL - при условии, что репозиторий настроен правильно. За последние пару лет я через Vercel выкатывал десятки лендингов, SaaS-панелей и внутренних дашбордов для клиентов, и в этой инструкции пройдусь по всему пути: подготовка проекта, три способа деплоя, настройка доменов и переменных окружения, а также грабли, на которые сам наступал не один раз.

Почему для деплоя Next.js выбирают именно Vercel

Next.js разрабатывает та же команда, что делает Vercel, поэтому фреймворк и платформа синхронизируются быстрее, чем с любым другим хостингом. ISR (Incremental Static Regeneration), Edge Middleware, оптимизация изображений через next/image, стриминг серверных компонентов - всё это на Vercel работает без дополнительной настройки, а на своём VPS часть функций придётся собирать руками или отключать.

Сравнение вариантов хостинга для Next.js, с которыми я реально работал:

При этом бесплатный тариф Hobby подходит для пет-проектов и MVP, а для коммерческого использования с командой и повышенными лимитами на функции понадобится план Pro - сейчас это около 20 $ за место в месяц.

Подготовка Next.js-проекта перед деплоем на Vercel

Перед первым деплоем я всегда прохожу один и тот же чек-лист, потому что половина проблем на проде вылезает именно из-за пропущенных мелочей на этом шаге.

• В package.json есть корректные скрипты build и start, а в идеале ещё и поле engines с зафиксированной версией Node - иначе Vercel возьмёт версию по умолчанию, которая может не совпадать с локальной.
• Переменные окружения разделены на .env.local для разработки и отдельно задокументированы для продакшена - сами файлы .env в репозиторий не коммитятся.
• В next.config.js прописаны domains или remotePatterns для next/image, если картинки грузятся с внешних доменов (CDN, S3, Cloudinary) - без этого компонент Image просто откажется рендерить внешнюю картинку и отдаст 500‑ю ошибку при билде.
• API-роуты не пишут файлы на диск через fs.writeFile - серверлес-окружение Vercel эфемерное, и файл, записанный при одном вызове, исчезнет к следующему.
• Для монорепозитория (Turborepo, Nx, pnpm workspaces) заранее понятно, какая директория - корень приложения, это пригодится на шаге настройки Root Directory в проекте.

Деплой через git-интеграцию - основной способ

Это путь, которым пользуется девять клиентов из десяти: на dashboard.vercel.com нажимаете Add New → Project, подключаете GitHub, GitLab или Bitbucket, выбираете репозиторий - Vercel сам определяет, что это Next.js, и подставляет команду сборки next build.

Если проект лежит не в корне репозитория (частая история для монорепо с фронтом и ботом в одном хранилище), в настройках проекта меняете Root Directory на нужную папку - например apps/web. После этого каждый push в основную ветку деплоит прод, а каждый push в фича-ветку или каждый PR создаёт отдельный preview-деплой со своим URL - это удобно, чтобы дать заказчику ссылку на промежуточный результат без размещения на боевом домене.

Что я обычно донастраиваю сразу после первого автодеплоя:

• Ignored Build Step - если в монорепо меняется только бэкенд-часть, а не фронт, лишний билд фронта можно пропустить и сэкономить минуты сборки.
• Build & Development Settings - переопределяю команду билда, если используется pnpm вместо npm (иначе Vercel иногда пытается поставить зависимости не тем менеджером и падает на lock-файле).
• Function Region - по умолчанию Vercel разворачивает функции в США, для аудитории из России и СНГ выгоднее по задержке выбрать регион ближе, например Франкфурт (fra1) или Стокгольм (arn1).

Деплой через Vercel CLI, когда нужен ручной контроль

CLI пригождается, если у клиента нет доступа к своему GitHub-репозиторию, если деплой нужно встроить в свой CI-пайплайн или запускать из скрипта - например, из n8n-сценария после успешного прохождения тестов.

Устанавливается глобально:

npm i -g vercel
vercel login
vercel

Команда vercel без флагов собирает и разворачивает preview-версию, а vercel - prod сразу катит в продакшен, минуя промежуточный этап. Для тонкой настройки заголовков, редиректов и cron-задач я держу в корне проекта vercel.json:

{
  "regions": ["fra1"],
  "redirects": [
    { "source": "/old-page", "destination": "/new-page", "permanent": true }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
    }
  ]
}

Готовые заготовки такого vercel.json под разные сценарии (монорепо, редиректы после переезда с Tilda, cron-задачи) я собираю в библиотеке готовых скриптов - быстрее адаптировать под свой проект, чем писать с нуля.

Переменные окружения, домены и регионы

Переменные окружения задаются в разделе Settings → Environment Variables, и Vercel сразу разделяет их на три контура: Development, Preview и Production. Это удобно, если, например, в Preview нужно ходить в тестовый контур T‑Bank или тестовый аккаунт СДЭК, а в Production - уже в боевые ключи эквайринга.

Для кастомного домена в разделе Domains добавляете свой адрес, а дальше на стороне регистратора прописываете либо A‑запись на IP Vercel, либо CNAME на cname.vercel-dns.com - SSL-сертификат Vercel выпускает и обновляет сам через Let’s Encrypt, руками с этим возиться не приходится. На практике перевод DNS занимает от 10 минут до нескольких часов в зависимости от TTL записей у прежнего хостинга.

Если у проекта аудитория в основном из России и Средней Азии, разница в скорости отклика между функцией в регионе США и функцией во Франкфурте ощущается на глаз - я всегда переключаю region на fra1 или arn1 в vercel.json ещё на этапе первого деплоя, чтобы не переделывать потом.

Как интегрировать API, вебхуки и сторонние сервисы

Serverless-функции Vercel ограничены по времени выполнения: на Hobby-плане это 10 секунд, на Pro - до 60 секунд (или больше с ручной настройкой maxDuration). Для типового API-роута, который принимает вебхук от T‑Bank или дёргает API СДЭК за расчётом доставки, этого хватает с запасом.

А вот что на Vercel запускать не стоит:

• aiogram-бота на long polling - серверлес-функция не живёт постоянно между вызовами, поэтому бот на polling там просто не будет ловить сообщения; для Telegram-ботов нужен либо webhook-режим с отдельной функцией на каждое обновление, либо отдельный сервер/VPS с постоянно работающим процессом.
• фоновые задачи через setInterval или очереди с долгим ожиданием - функция завершает выполнение и перестаёт существовать, состояние между вызовами не сохраняется; для повторяющихся задач нужен Vercel Cron Jobs или внешний планировщик, дёргающий эндпоинт по расписанию.
• тяжёлые библиотеки вроде Puppeteer без облегчённой сборки - итоговый размер функции упирается в лимит 50 МБ, и деплой падает на этапе сборки без явной причины в логе, если не знать, куда смотреть.

Для таких сценариев я обычно выношу бота или тяжёлую автоматизацию на отдельный сервер, а Vercel оставляю под сам фронтенд и лёгкие API-роуты - это устойчивее, чем пытаться впихнуть всё в один серверлес-контур. Если нужно спроектировать такую связку - фронт на Next.js плюс отдельный бэкенд под ботов и интеграции - можно посмотреть услуги по разработке и деплою под конкретную задачу.

Типичные ошибки при деплое Next.js на Vercel

Список собран по реальным кейсам с проектов клиентов, где деплой падал или работал не так, как ожидалось.

• Забыли добавить переменные окружения для Preview-контура - билд проходит, страница открывается, но форма заказа не отправляется, потому что ключ эквайринга подставился пустым.
• Домены картинок не прописаны в remotePatterns - компонент Image кидает ошибку только в продакшен-сборке, хотя локально в dev-режиме всё грузилось нормально.
• В монорепо забыли поменять Root Directory - Vercel пытается собрать корень репозитория целиком вместо конкретного приложения и падает на отсутствующем package.json.
• Function Region не совпадает с регионом базы данных - запросы к Postgres или MongoDB в другом регионе добавляют по 100-200 мс на каждый вызов, и страница ощутимо тормозит без видимой причины в коде.
• Использование process.env напрямую в клиентском коде без префикса NEXT_PUBLIC_ - переменная просто не попадает в браузерный бандл, и фича молча не работает.

Частые вопросы

Сколько стоит деплой Next.js на Vercel?

Сам деплой на тарифе Hobby бесплатный и подходит для некоммерческих и тестовых проектов. Для коммерческого использования с командой нужен план Pro - около 20 $ в месяц за место. Если нужна разработка лендинга на Next.js с готовой настройкой деплоя, доменов и интеграций под ключ, у меня это стоит от 80 000 ₽.

Можно ли деплоить на Vercel Next.js-проект с полноценным бэкендом?

API-роуты и серверные компоненты - да, без проблем, ограничение только по времени выполнения функции. А вот长running-процессы вроде бота на long polling или воркера очередей туда не переносятся напрямую - под них нужен отдельный сервер, а Vercel остаётся витриной и слоем лёгких API.

Чем деплой на Vercel отличается от размещения на своём VPS?

На VPS вы сами настраиваете Nginx, PM2, сертификаты и обновления Node, зато полностью контролируете ресурсы и можете держать долгоживущие процессы. Vercel берёт эту рутину на себя и даёт autoscaling, edge-сеть и preview-деплои из коробки, но ограничивает время выполнения функций и требует укладываться в архитектуру серверлес.

Сколько времени занимает первый деплой проекта на Vercel?

Подключение репозитория и первая сборка занимают 5-10 минут вместе с ожиданием билда. Настройка кастомного домена добавляет от 10 минут до нескольких часов из-за распространения DNS-записей. Если проект собирается с нуля и нужно продумать структуру API-роутов, переменных окружения под T‑Bank или СДЭК и регион функций - закладываю на это отдельную консультацию перед стартом работ.