Как устроены переменные окружения в next js?

Question

[Константин]

Всем привет, я не фронтендер, мне просто необходимо набросать сайт визитку на next JS. Есть форма, которая получает данные и с помощью API telegram отправляет сообщение. Но есть некоторые переменные, которые не хотелось бы хранить снаружи) Почитав доку next js, ничего нормального не вышло.

Мне постоянно кидает вот эту ошибку:

Uncaught ReferenceError: process is not defined
    at HTMLButtonElement.<anonymous> (tg_message.js:14:27)

Вот так выглядит мой .env.local

TOKEN=str
CHAT_ID=bigint

На просторах интернета нашел такое решение. Там говорится о том, что надо создать файл next.config.js.

мой next.config.js

module.exports = {
    env: {
        NEXT_PUBLIC_CHAT_ID: process.env.TOKEN,
        NEXT_PUBLIC_TOKEN: process.env.CHAT_ID,
      }
}

Но это тоже не помогло(

Ну и на конец исполняемый файл

console.log("TOKEN:", process.env.NEXT_PUBLIC_TOKEN);
console.log("CHAT_ID:", process.env.NEXT_PUBLIC_CHAT_ID);
    
var token = process.env.NEXT_PUBLIC_TOKEN;
var chat_id = process.env.NEXT_PUBLIC_CHAT_ID;

Comments

[WbICHA]

Ну и на конец исполняемый файл

Что-то в нём не видно хотя бы 14 строк кода и взаимодействия с домом.

Uncaught ReferenceError: process is not defined
    at HTMLButtonElement.<anonymous> (tg_message.js:14:27)

[szQocks]

там по дефолту .env переменные должны работать, просто в .env файле они должны начинаться с NEXT_PUBLIC , например так - NEXT_PUBLIC_CHAT_ID

а у тебя там TOKEN=str
CHAT_ID=bigint

[Константин]

WbICHA, это кусок кода. Смысл скидывать целый? Хотите увидеть как я из формы значения достаю?))

[Константин]

szQocks, пробовал с так же. Не помогло

[szQocks]

Константин, возможно .env файл не в той директории, а так хз что ещё может быть, может у тебя там вообще не некст, а говоришь что некст :D

[Константин]

szQocks, в какой он должен быть? У меня есть src папка если что

[szQocks]

Константин,

[Константин]

szQocks, а как вы настраиваете env? Архитектура у меня такая же

[szQocks]

Константин,

а как вы настраиваете env

вроде никак, ну скину код из двух файлов, может поможет, я уже не пишу на нексте, меня он за****л

jsconfig.json - это скорее всего алиас ( тоже не как не связан с .env )

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

next.config.js - тут пакеты типа bufferutils и так далее - ни как не связаны с .env, эти пакеты закрывают баги в нексте на сколько я помню ( но какие именно не помню )

const nextConfig = {
  reactStrictMode: false,
};

module.exports = {
  ...nextConfig,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.externals.push({ bufferutil: "bufferutil", "utf-8-validate": "utf-8-validate", "supports-color": "supports-color" }); 
    }

    return config;
  },
};

[Константин]

А в коде вы как вызываете переменные?

[szQocks]

Константин, process.env.NEXT_PUBLIC_API_URL

[Константин]

szQocks, окей, попробую завтра. Спасибо

[szQocks]

Константин, ещё у тебя же файл по другому называется .env.local, а не .env, этот момент тоже проверь

[Константин]

szQocks, окс, спасибо