Vercel

Коротко: Хостинг-платформа, специализирующаяся на проектах Next.js (и других фронтенд-фреймворках) — каждый git push может автоматически запускать новый деплой.

Подробнее: Проекты принадлежат «команде» или личной учётной записи; у каждого проекта свои переменные окружения, домены и подключения хранилищ (например, Vercel Blob). CLI (vercel) может деплоить вручную параллельно с автоматическим деплоем из Git (vercel --prod) — полезно, например, если автор коммита Git заблокирован для автоматического деплоя.

Подробности

Production- и preview-деплои

Каждый push в настроенную production-ветку (обычно main) автоматически запускает production-деплой; push в другие ветки или pull request, напротив, автоматически создают собственные preview-деплои (preview deployments) — каждый представляет собой совершенно самостоятельную версию приложения, доступную по своему URL, изолированную от production. Это позволяет протестировать изменение вживую (включая реальную серверную функциональность, а не только статический HTML) ещё до слияния. У каждого preview-деплоя могут быть и собственные переменные окружения — например, тестовая база данных вместо реальной production-базы — чтобы эксперименты в preview-окружениях оставались безопасными для реальных пользовательских данных.

Serverless- и edge-функции

На Vercel проекты Next.js по умолчанию работают на сочетании статически предварительно отрендеренных страниц (везде, где возможно, например страниц без пользовательского содержимого) и serverless/edge-функций для всего, что нужно вычислять динамически на каждый запрос (API-маршруты, Server Components с доступом к базе данных). Разница между двумя типами функций: serverless-функции работают в полной среде Node.js (больше совместимости, но более медленный холодный старт), edge-функции — в более лёгкой среде выполнения, распределённой ближе к пользователю (более быстрый холодный старт, но более ограниченная поддержка API Node.js) — какой тип используется, можно задавать для каждого маршрута через export const runtime = "edge". «Холодный старт» означает время до готовности неработающей в данный момент функции к новому запросу — при малом трафике (функцию вызывают редко) эта разница заметнее, чем при постоянно высокой нагрузке, когда функции обычно и так остаются «тёплыми».

Edge-сеть и CDN

Статическое содержимое (предварительно отрендеренные страницы, изображения, бандлы CSS/JS) автоматически раздаётся через глобальную CDN (сеть доставки контента) — Vercel хранит копии во многих географически распределённых точках, так что пользователь получает содержимое из ближайшей точки, а не с единственного, потенциально далёкого сервера. Это заметно сокращает время загрузки, особенно для пользователей, географически далёких от исходного расположения сервера.

Процесс сборки и кэширование

При каждом деплое Vercel запускает полный процесс сборки Next.js (next build) в изолированной среде сборки — зависимости кэшируются между сборками (кэш для node_modules), чтобы ускорить повторные сборки того же проекта. Если сборка не удалась (например, из-за ошибки TypeScript или отсутствующей переменной окружения), прежняя рабочая production-версия остаётся в сети без изменений — то есть неудачный деплой не выводит приложение из строя автоматически, он просто отбрасывается.

Домены и DNS

Проекты Vercel автоматически получают поддомен *.vercel.app; собственные домены можно дополнительно подключить записями DNS (обычно записи A или CNAME). Для production-использования собственный домен почти всегда разумнее автоматически созданного поддомена Vercel — хотя бы ради узнаваемости и независимости от платформы хостинга.

См. также: Переменные окружения, Vercel Blob Storage, DNS-записи