Я работал с Next.js какое-то время, но раньше мы сталкивались с трудностями при работе с переменными среды, в основном, когда начинали участвовать в существующих проектах.
Проекты обычно имеют файл .env.example
, который помогает участникам настроить проект в локальной среде, где мы можем создать файл .env.local
на основе примера env. Причина этого в том, что .env.local
не будет отслеживаться в системе управления версиями git, поскольку он может содержать конфиденциальные данные.
Проблемы, с которыми можно столкнуться,
- Неясные ошибки времени выполнения, поскольку требуемые переменные env не установлены.
- Неясные ошибки времени компиляции, потому что необходимые переменные env не установлены.
- Неожиданное поведение в приложении, поскольку не задана необходимая переменная для локальной среды
- ….
- ….
и список растет…
Эти проблемы не ограничиваются локальными, даже при развертывании в удаленной среде, такой как Vercel, эти переменные env, если они не установлены, вызовут ошибку времени выполнения, но в идеале было бы лучше, если бы они были обнаружены во время самого времени сборки.
Проверка переменных среды — важный шаг в процессе разработки любого приложения. Переменные среды используются для хранения конфиденциальной информации, такой как ключи API и пароли, которые не следует хранить непосредственно в кодовой базе. Важно проверить эти переменные, чтобы убедиться, что приложение безопасно и работает правильно.
Мы можем использовать библиотеку Zod для проверки переменных среды. Zod — это мощная, быстрая и легкая библиотека JavaScript для проверки и преобразования данных. Он поддерживает множество типов данных, включая строки, числа, массивы, объекты и даже пользовательские типы данных.
Вот пошаговое руководство по проверке переменных среды с помощью Zod в приложении Next.js:
1. Установите Зод:
В приложении Next.js выполните следующую команду, чтобы установить Zod:
npm install zod
2. Создайте схему для ваших переменных среды:
Zod позволяет вам создать схему для ваших переменных среды, которая определяет структуру и типы переменных, которые вы ожидаете. Вот пример схемы для нескольких переменных среды:
const zod = require('zod'); const envSchema = zod.object({ API_KEY: zod.string().required(), API_SECRET: zod.string().required(), PORT: zod.number().integer().required(), });ty
3. Проверьте переменные среды:
.parse
метод Zod проанализирует объект и проверит соответствие envSchema
.
// You can't destruct `process.env` as a regular object, so you have to do it manually here. export const env = envSchema.parse({ API_KEY: process.env.API_KEY, API_SECRET: process.env.API_SECRET, PORT: process.env.PORT, });
Наконец, вы должны запустить вышеуказанные, когда Next.js создаст приложение. Вы можете создать файл с именем env.js
и иметь в нем вышеуказанные сценарии, чтобы мы могли легко запускать их, просто импортируя в next.config.js
, как показано ниже:
// next.config.js import './src/env.js'; /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, images: { domains: ['res.cloudinary.com'], }, };
Всякий раз, когда Next.js строится, он использует файл конфигурации next.config.js
, и этот файл выполняется во время сборки, и происходит проверка.
БОНУС: используйте переменные среды:
Вы также можете легко использовать переменные env с лучшей поддержкой ввода.
import { env } from './env'; // Example lib.init({ API_KEY: env.API_KEY, API_SECRET: env.API_SECRET, });
Шаблон T3 stack на базе Next.js сделает это за вас из коробки. Пожалуйста, проверьте это. Вы также можете обрабатывать переменные среды клиента и сервера отдельно для тонкого контроля, чтобы секреты вашего сервера не раскрывались клиенту.
const zod = require('zod'); const clientSchema = Zod .object // your client schema goes here (); export const clientEnv = clientSchema({}); const serverSchema = Zod .object // your server schema goes here (); export const serverEnv = serverSchema({});
Удачного управления переменными среды.
Рекомендации
Первоначально опубликовано на https://www.bharathvaj.me 5 февраля 2023 г.