Деплой на Vercel за 5 минут
Сайт на твоём ноуте — это ещё не сайт. Деплой = «выложить в интернет так чтобы кто угодно открыл». Самый быстрый и бесплатный путь для Next.js / React / Vue / Astro проектов — Vercel. Реально 5 минут от пушим до URL.
Что такое Vercel и зачем
Vercel — компания, которая создала Next.js, и её хостинг под Next.js идеален. Берёт твой код из GitHub репо, собирает, кладёт на CDN по всему миру, даёт URL. Бесплатно для пет-проектов и небольших сайтов. Альтернативы: Netlify, Cloudflare Pages — похожие. Но если у тебя Next.js — начинай с Vercel.
Подготовка проекта
1) Проект должен лежать в Git и пушиться в GitHub (или GitLab/Bitbucket). 2) В корне должен быть package.json с скриптами build и start. 3)
локально должен пройти без ошибок — если ломается на твоей машине, в Vercel тоже сломается. 4) Если ты используешь .env переменные — собери список, скоро будем добавлять их в Vercel.
Деплой
1) Заходишь на vercel.com → Sign up через GitHub. 2) Нажимаешь «Add New Project» → выбираешь репо. 3) Vercel автоматически определяет фреймворк (Next.js), настройки можно оставить по умолчанию. 4) В разделе Environment Variables — добавляешь всё что было в твоём .env (KEY=VALUE построчно). 5) Клик Deploy → ждёшь 30-90 секунд → получаешь URL вида my-app-xyz.vercel.app. Каждый push в main — автоматический передеплой.
Свой домен
Vercel-URL хорош для теста, но для серьёзного — свой домен. Покупаешь на Namecheap / GoDaddy / reg.ru (~$10/год для .com). В Vercel: Project → Settings → Domains → добавить → Vercel показывает какие DNS-записи прописать у регистратора. Через 5-30 минут DNS обновится и твой домен будет показывать твой сайт. HTTPS Vercel выпускает автоматически (Let’s Encrypt).
Превью на каждый PR
Vercel создаёт ОТДЕЛЬНЫЙ URL для каждого pull request. Это золото для команд: дизайнер открывает превью-URL и сразу видит изменения, не запуская локально. Эта фича называется Preview Deployments и работает из коробки. Для одиночки: создал ветку → запушил → получил отдельный URL → проверил → смержил в main → автодеплой в прод.
# === ШАГ 1: убедись что проект собирается === npm run build # Если ошибки — чини СНАЧАЛА, потом деплой # Самые частые: пропущенный import, type ошибка, env-переменная не найдена # === ШАГ 2: запушь в GitHub === git init git add . git commit -m "первый коммит" # Создай новый репо на github.com/new (можно приватный) git remote add origin https://github.com/username/my-site.git git push -u origin main # === ШАГ 3: деплой через UI === # 1) vercel.com → Sign Up → Continue with GitHub # 2) New Project → Import Repository → выбираешь репо # 3) Framework Preset: Next.js (определит автоматически) # 4) Environment Variables: добавь всё из .env # OPENAI_API_KEY = sk-... # DATABASE_URL = postgresql://... # 5) Deploy → ждёшь сборку (30-90 сек) # 6) Получаешь my-app-xyz.vercel.app — открываешь в браузере # === АЛЬТЕРНАТИВА: через CLI === npm i -g vercel vercel # первый раз — линкует проект vercel --prod # деплой в продакшн # Это удобно когда хочешь деплоить из терминала без UI # === ОБНОВЛЕНИЕ === # Каждый git push в main → автоматический передеплой git add . git commit -m "обновил hero" git push # Через минуту изменения видны на сайте # Pull Request → отдельный preview URL git checkout -b feature/new-pricing git push origin feature/new-pricing # В GitHub откроется PR, в комментариях бот Vercel даёт preview-URL # === ENV-ПЕРЕМЕННЫЕ ПОСЛЕ ДЕПЛОЯ === # Если забыл добавить env при первом деплое: # Project → Settings → Environment Variables → Add # Потом ВРУЧНУЮ передеплой (Deployments → ... → Redeploy) # (изменения env НЕ триггерят автодеплой) # === СВОЙ ДОМЕН === # Project → Settings → Domains → Add: example.com # Vercel говорит "пропиши вот эти DNS-записи у регистратора": # Type: A Name: @ Value: 76.76.21.21 # Type: CNAME Name: www Value: cname.vercel-dns.com # Идёшь к регистратору, добавляешь записи # Через 5-30 минут (иногда до 24 часов) — домен работает с HTTPS
Пошаговый деплой Next.js проекта на Vercel