Пытаюсь задеплоить приложение Next.js на Vercel и нужно установить переменные окружения (API ключи, URL и т.д.). Создал файл .env.local на машине и он работает, но когда пушу в GitHub и Vercel делает билд, приложение не может получить доступ к этим переменным. Как мне передать это безопасно в Vercel?
Файл .env.local никогда не попадёт в продакшен, потому что Git игнорирует его по умолчанию (он в .gitignore), поэтому Vercel не имеет доступа к этим переменным во время деплоя. Тебе нужно настроить переменные прямо в панели Vercel. Заходишь в проект в dashboard'е Vercel, переходишь в Settings > Environment Variables и добавляешь каждую нужную переменную - имя и значение. Если есть переменные, которые нужны только для разработки (например локальные тесты), отмечаешь галочку "Development" только для них. Для тех, что Next.js нужен использовать и на сервере, и на клиенте, добавляешь без ограничений по окружению.
Для переменных, которые должны остаться только на сервере (типа чувствительных API ключей), добавляешь их обычно и используешь в коде внутри серверных функций - getServerSideProps, API routes, Server Components. Next.js автоматически не выставляет их в браузер. Если нужно получить доступ к переменной на клиенте, добавь префикс NEXT_PUBLIC_ к имени (типа NEXT_PUBLIC_API_URL) и она будет доступна в браузере, но используй это только для некритичных данных.
После настройки всего в Vercel делаешь новый push в GitHub, даже если ничего не менялось, и Vercel пересоберёт приложение с переменными, которые ты установил. Если используешь preview deployments (автоматический деплой pull request'ов), настрой переменные и для этих тестовых окружений в секции "Preview" в settings'ах. Совет: если переменных много, скопируй целый блок из одного окружения в другое вместо того, чтобы добавлять их по одной.
Заходишь в dashboard Vercel'а, открываешь проект, идёшь в Settings > Environment Variables и вставляешь туда ключи, которые у тебя в .env.local. Создаёшь переменную для каждой (API_URL, API_KEY, что угодно) и отмечаешь, в каких окружениях каждая работает - Development, Preview, Production или все три сразу. После этого когда Vercel делает build, он подставляет эти переменные в процесс и приложение может получить доступ через `process.env.НАЗВАНИЕ_ПЕРЕМЕННОЙ`.
Вот что люди часто упускают: если ты используешь переменные, которые должны быть только на сервере (типа пароли базы данных или секретные API ключи), то префиксить `NEXT_PUBLIC_` нужно только те, что пойдут на клиент. Всё остальное остаётся в безопасности на сервере во время build'а. Если добавить чувствительный ключ с `NEXT_PUBLIC_`, он утечёт в JavaScript, который браузер скачивает - вот тогда уже не безопасно. Следи за этой конвенцией, потому что легко ошибиться.
Ещё полезный совет - скопируй структуру своего .env.local в файл .env.example (или .env.local.example), удали настоящие значения и закоммитить это в Git. Тогда кто будет работать над проектом, сразу поймёт, какие переменные нужно настроить и локально, и в Vercel'е.
Войдите, чтобы ответить.
