Блог

Главная - Вопросы по программированию - Переменные Nextjs process.env не работают даже после развертывания на Vercel

Переменные Nextjs process.env не работают даже после развертывания на Vercel

#javascript #next.js #environment-variables

Вопрос:

Итак, у меня есть проект, в котором есть 4 ключа api, которые мне нужны скрытыми:

 STORYBLOK_API_KEY= 
EMAILJS_SERVICE_ID= 
EMAILJS_USER_ID= 
EMAILJS_TEMPLATE_ID=

Все 4 из них , с которыми я использую process.env.XXX , забавно то, что ключ storyblok работает (но он не используется в компоненте), однако остальные 3 я использую в функции отправки формы:

  const sendContactForm = async (formData) => {
      const data = {
        service_id: process.env.EMAILJS_SERVICE_ID,
        template_id: process.env.EMAILJS_TEMPLATE_ID,
        user_id: process.env.EMAILJS_USER_ID,
        template_params: { ...formData, form: "Discover form" },
      };
      try {
        const response = await axios.post("https://api.emailjs.com/api/v1.0/email/send", data);
        console.log(response);
      } catch (e) {
        console.log(e);
      }
    };

И они здесь не работают, они не определены. Я пытался:

  • сервер разработки
  • создайте и запустите рабочий сервер
  • разверните на Vercel и установите там переменные среды

Все 3 подхода не сработали.

Комментарии:

1. Вы пытаетесь получить доступ к переменным на стороне клиента?

2. @Darkbound как называется файл, в котором вы храните переменные?

3. @PsyGik да, это то, что я пытаюсь сделать

4. @MarioG8 .env.локальный, но, как я уже сказал, он не работает даже при развертывании в Vercel и настройке переменных на их стороне.

5. По умолчанию переменные среды доступны только в Node.js окружающая среда, что означает, что они не будут доступны браузеру. Чтобы предоставить переменную браузеру, вы должны добавить к ней префикс NEXT_PUBLIC_ .

Ответ №1:

Вы точно читали документацию? Как мы можем добавить Environment Variables Next.js? ниже, у вас есть простой пример из документов.

.env.местный

 DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

Это загружает process.env.DB_HOST , process.env.DB_USER , и process.env.DB_PASS в Node.js среда автоматически позволяет использовать их в Next.js методах извлечения данных и маршрутах API.

пример:

 // pages/index.js
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  })
  // ...
}

Environment variables доступны только в Node.js среде (на стороне сервера
), что означает, что они не будут доступны браузеру.
Для того, чтобы предоставить переменную браузеру(на стороне клиента), вам необходимо указать префикс переменной, NEXT_PUBLIC_. например:

 NEXT_PUBLIC_ANALYTICS_ID=123456xyzabcde

Здесь У Вас есть Все примеры использования переменных среды
в Next.js . Удачи 😉

Метки: