Я работал с 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 г.