Динамическое добавление переменной среды во внешний скрипт js с помощью NextJS

Недавно я начал создавать веб-приложение с использованием NextJS для внутреннего использования и столкнулся с проблемой. Я хотел бы включить внешний JS-скрипт New Relic для целей мониторинга, но я хотел бы сделать это динамически, чтобы идентификатор приложения получался из файла .env на каждом этапе (разработка, УАТ и Производство).

Вот как я решил эту проблему без библиотеки.

Я сохранил скрипт, сгенерированный newrelic, в public/js/newrelic.js. Мы создаем новый объект среды конфигурации с nrAppId в next.config.js. Я добавил несколько внешних JS-скриптов, таких как шрифт Google API и скрипт New Relic, используя пользовательский документ. Нам нужно только вызвать переменную из next.config.js в документе.

<script async type="text/javascript">
const NR_APP_ID={config.env.nrAppId};
</script>

Доступ к переменной NR_APP_ID можно получить через внешний файл JS _document.js.

Спасибо за прочтение.

#NeverEndingImprovement

Рекомендации :