Как задеплоить сайт на Next.js в Vercel со своим доменом

Коротко: четыре шага

1. Код лежит в Git-репозитории на GitHub, GitLab или Bitbucket.
2. В Vercel нажимаете Add New → Project, выбираете репозиторий, и платформа сама распознаёт Next.js.
3. Добавляете переменные окружения и запускаете первый деплой.
4. В Settings → Domains добавляете свой домен и прописываете DNS-записи у регистратора.

После этого каждый push в основную ветку выкатывает production, а каждая другая ветка и pull request получают свою preview-ссылку.

Подготовка проекта

Прежде чем подключать Vercel, убедитесь, что:

• npm run build проходит локально без ошибок;
• lock-файл (package-lock.json, pnpm-lock.yaml или yarn.lock) закоммичен — по нему Vercel понимает, каким менеджером пакетов собирать;
• файлы .env*.local в .gitignore и не попали в репозиторий;
• нужная версия Node.js указана в engines в package.json или в настройках проекта.

Подключение репозитория

1. Войдите в Vercel через аккаунт Git-хостинга и дайте доступ к нужному репозиторию.
2. Выберите Import напротив репозитория.
3. Если проект в монорепозитории, укажите Root Directory — папку, где лежит приложение.
4. Команды сборки и папку вывода для Next.js менять не нужно: они определяются автоматически.
5. Нажмите Deploy.

Первый деплой займёт несколько минут. На выходе вы получите адрес вида project-name.vercel.app.

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

Переменные задаются в Settings → Environment Variables отдельно для трёх окружений: Production, Preview и Development.

Что важно помнить:

• Переменные с префиксом NEXT_PUBLIC_ встраиваются в клиентский JavaScript при сборке и видны любому посетителю. Секреты (ключи API, пароли от БД) — только без этого префикса.
• После изменения переменной нужен новый деплой, иначе сайт продолжит работать со старыми значениями.
• Для Preview укажите тестовую базу и тестовые ключи, а не боевые.

Чтобы получить те же переменные локально, используйте Vercel CLI:

npm i -g vercel
vercel link
vercel env pull .env.local

Preview-деплои

Каждая ветка и каждый pull request получают отдельный URL с актуальной версией. Это удобно, чтобы показать правки заказчику или проверить их до слияния, не трогая основной сайт. Ссылка появляется в комментарии к pull request и во вкладке Deployments.

Закрыть preview-ссылки от посторонних можно в разделе Deployment Protection. Проверьте этот раздел, если в preview есть неопубликованный контент.

Подключение своего домена

Откройте Settings → Domains и добавьте домен, например example.com. Есть два варианта:

• Оставить DNS у регистратора и добавить записи, которые покажет Vercel: обычно A-запись для корневого домена и CNAME для www.
• Делегировать домен на Vercel, сменив NS-серверы у регистратора. Тогда DNS полностью управляется из Vercel.

Берите значения именно из панели проекта: Vercel периодически их обновляет. Выберите основной адрес, например example.com, и включите редирект с www на него. SSL-сертификат Vercel выпускает автоматически, как только DNS начнёт указывать на платформу.

При смене NS-серверов перенесите все существующие записи, особенно MX и TXT для почты, иначе почта домена перестанет работать.

Лимиты бесплатного плана

План Hobby предназначен для личных некоммерческих проектов. Для сайта компании, интернет-магазина или клиентского проекта условия использования требуют платный план Pro.

На Hobby ограничены время сборки, длительность выполнения серверных функций, трафик, оптимизация изображений и другие ресурсы. Конкретные значения Vercel меняет, поэтому смотрите актуальные цифры в документации (vercel.com/docs/limits) и следите за вкладкой Usage в проекте. Больше всего лимиты расходуют тяжёлые изображения, частые пересборки и серверный рендеринг страниц, которые можно было бы сделать статическими.

Частые ошибки

• Локально собирается, на Vercel нет. Часто причина в регистре имён файлов: Windows и macOS его не различают, а Linux-сборка различает, и Header.tsx не найдётся по импорту ./header.
• Переменная undefined. Не задана для нужного окружения, не было передеплоя или она используется в браузере без префикса NEXT_PUBLIC_.
• Секрет с префиксом NEXT_PUBLIC_ — он оказался в открытом коде.
• Preview подключён к боевой базе и тестовые действия меняют реальные данные.
• Старые A-записи у регистратора остались рядом с новыми, и домен открывается то на старом хостинге, то на Vercel.