Env, сборка и деплой
Безопасные переменные окружения, next/image, next/font, сборка и Vercel.
Обновлено
Что значит «продакшен»
Разработка (npm run dev) оптимизирована для вас: мгновенная перезагрузка, подробные сообщения об ошибках. Продакшен (npm run build + деплой) оптимизирован для пользователей: минифицированный код, заранее сгенерированные страницы, кэш, CDN. Между ними бывают различия — поэтому сборку проверяют до деплоя.
Переменные окружения
Переменные окружения — настройки, которые различаются между средами (локально, preview, продакшен), и секреты, которым не место в коде: URL базы данных, API-ключи.
.env.local → локальные значения — НЕ попадают в Git
.env → значения по умолчанию, без секретов
| Вид | Пример | Где доступна |
|---|---|---|
| без префикса | DATABASE_URL |
только на сервере — безопасно для секретов |
NEXT_PUBLIC_ |
NEXT_PUBLIC_SITE_URL |
и в браузере — встраивается в бандл при сборке |
Никогда не кладите секрет в переменную NEXT_PUBLIC_ — её может прочитать кто угодно из JS страницы.
Дополнительная защита: import 'server-only' в модулях с секретами (как shared/api/db.ts в этом проекте) — сборка упадёт, если они случайно попадут на клиент.
Встроенные оптимизации
| Инструмент | Что делает | Зачем |
|---|---|---|
next/image |
меняет размер, конвертирует в WebP/AVIF, ленивая загрузка | изображения меньше, без CLS |
next/font |
скачивает шрифт при сборке и отдаёт его с вашего домена | без внешнего запроса, без «прыжка» текста |
next/dynamic |
загружает компонент только когда он нужен | меньше начальный бандл |
| Server Components | ноль JS для неинтерактивного UI | страница быстрее |
<Image src={cover} alt="..." width={800} height={450} priority /> // priority = главное изображение (LCP)Сборка
npm run build # проверяет типы, пререндерит, показывает тип каждого маршрута
npm run start # запускает сборку локально — проверяйте здесь до деплояОбозначения в выводе: ○ статика, ◐ partial prerender, ƒ динамика.
Деплой на Vercel
- Push на GitHub.
- vercel.com → Add New Project → импортируйте репозиторий.
- Добавьте переменные окружения (Settings → Environment Variables), отдельно для Production / Preview.
- Каждый push в
main= продакшен; каждый PR = свой preview URL — см. Workflow.
Чек-лист перед продакшеном
-
npm run buildбез ошибок и предупреждений - переменные окружения заданы; ничего секретного с
NEXT_PUBLIC_ -
metadata+metadataBase+ sitemap - страницы
not-foundиerror - Lighthouse: performance, accessibility, SEO
- Server Actions и Route Handlers: авторизация + валидация
- изображения через
next/image, шрифты черезnext/font
Коротко
- Проверяйте
build+startлокально перед деплоем. - Секреты — без префикса;
NEXT_PUBLIC_попадает в браузер. - Vercel: push → деплой; PR → preview.