Блог

Я не могу динамически обращаться к переменным среды в NextJS. Во .env.local мне есть:

 NEXT_PUBLIC_TEST=test
 

Во _app.tsx мне есть:

 const test = "NEXT_PUBLIC_TEST";
console.log(process.env.NEXT_PUBLIC_TEST); // = 'test'
console.log(process.env[test]); // = undefined
 

Я попробовал то же самое в приложении Create React:

 # .env
const test = 'REACT_APP_TEST'
console.log(process.env.REACT_APP_TEST) // = 'test'
console.log(process.env[test]) // = 'test'
 

Кто-нибудь знает, почему NextJS не разрешает этого и как это переопределить? Я знаю next.config.js , что это вещь, но я бы хотел ее использовать .env .

Согласно официальным документам:

Примечание: Чтобы сохранить в безопасности секреты только для сервера, Next.js process.env.* заменяет правильными значениями во время сборки. Это означает, что process.env это не стандартный объект JavaScript.

Следовательно, то, что вы пытаетесь сделать, возможно только в режиме разработки, что тоже возможно в коде на стороне сервера.

Вы можете вручную создать объект, отображающий константы среды, и использовать его вместо process.env , если вы действительно хотите использовать динамические значения.

Вот пример:

 // utils/config.js

export default {
  TEST: process.env.NEXT_PUBLIC_TEST
};
 

 // pages/index.js

import config from "../utils/config";

const test = "TEST";
console.log(config[test]);

const IndexPage = () => <div>Hello World</div>;
export default IndexPage;