Use @next/env instead of dotenv in Next.js App Examples

[josbelluna]

Is your feature request related to a problem? Please describe.

No

Feature Description

For NextJS App Examples, use @next/env instead of dotnev to match NextJS environment variables.

There are some issues using dotnev library directly to load NextJS env variables, for example trying to load them from .env.local doesn't work by default.

NextJS now exposes @next/env package that can be used to get the same results as the main process:
https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#loading-environment-variables-with-nextenv

// newrelic.js
const { loadEnvConfig } = require('@next/env')

const projectDir = process.cwd()
const dev = process.env.NODE_ENV !== 'production'
loadEnvConfig(projectDir, dev)

[workato-integration]

https://new-relic.atlassian.net/browse/NR-314418

[jsumners-nr]

Thank you for the suggestion. I do not think it is necessary. Our purpose with these examples is to show how to utilize the New Relic Node.js agent with Next.js, not to provide tutorials for Next.js itself. Personally, I am also 100% against adding any sort of process.env.NODE_ENV references. NODE_ENV is a very poor practice; see https://www.youtube.com/watch?v=irRsEfCTTtg

[josbelluna]

Yes, I agree with not using NODE_ENV for detecting the environment, in fact it is not required to be use it, as it is not the key for getting the environment file. You can perfectly use it as:

const { loadEnvConfig } = require('@next/env')

const projectDir = process.cwd()
loadEnvConfig(projectDir)

Then you don't need to add NODE_OPTIONS='-r dotenv/config --loader newrelic/esm-loader.mjs' or importing dotenv.

I added because the second argument of loadEnvConfig is for detecting if you are on a dev server, which has some unique cases for NextJS, for example if not specified it will read variables for env.production if the keys doesn't exist on env.local and that may not be wanted. You can use whatever to detect you are in a dev server.

I asked because there are some of posts and issues asking about this on other threats, like these:
https://forum.newrelic.com/s/hubtopic/aAX8W0000015AjuWAE/nextjs-13-env-variables-are-undefined
newrelic/newrelic-node-nextjs#143

But none of them seems to work correctly with the same env files configuration NextJS suggest to use, we need to use .env but NextJS supports .env.local, .env.production, and .env.test.

[jsumners-nr]

The newrelic agent is loaded prior to Next.js. We cannot rely on their systems for parsing environment variables.

[bizob2828]

@josbelluna this example is just demonstrating the observability the New Relic Node.js agent provides as well as some examples of common problems our customers hit: injecting browser agent, forwarding logs, handling errors. This is not intended to be a template for the best way to use the Node.js agent with Next.js.