Allow runtime environment variables in middleware

[jordie23]

Describe the feature you'd like to request

We'd like the ability to use environment variables at runtime in middleware.

It is a common application practice to build & bundle an app once and then configure it based on runtime environment variables. This allows us to adhere to being a 12 factor app as much as possible. We can do this with the rest of nextjs, but not middleware.

Describe the solution you'd like

I'm unsure what the mechanism should be because you currently replace process.env.FOO at build time, but there should be some ability to read it. Perhaps make serverRuntimeConfig specially available in middleware? Perhaps make certain env vars available if they're prefixed with MIDDLEWARE_ like the established pattern for prefixing PUBLIC_ vars ?

Describe alternatives you've considered

We previously were able to use optional chaining to get around this and process.env?.FOO worked at runtime in middleware, but as there were changes at some point between nextjs versions this ability has disappeared and there appears to be no way to access any environment variables at run time.

The only other solution we can think of is mentioned here to perhaps load a JSON file at deployment time with config that would be included in the app, but it is somewhat awkward to use and requires changes to the way env vars are set by deployment systems and generally doesn't feel right. It'd be better if environment variables functioned as they do in other parts of the application.

[eric-burel]

Facing similar issue for e2e testing, I need to setup NEXT_PUBLIC_NODE_ENV and NODE_ENV to test at runtime.
Example:

import { NextFetchEvent, NextRequest, NextResponse } from "next/server";

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  // @see https://nextjs.org/docs/messages/middleware-relative-urls
  // FIXME: 05/2022 this won't work as expected, env variables are set at build-time: https://github.com/vercel/next.js/discussions/36338
  if (
    process.env.NODE_ENV === "production" &&
    process.env.NEXT_PUBLIC_NODE_ENV !== "test"
  ) {
    const url = req.nextUrl.clone();
    url.pathname = "/";
    return NextResponse.redirect(url);
  }
  // In dev and test mode we can access the pages
  return NextResponse.next();
}

This protects my debug routes.

As a palliative I've defined a build-time value "NEXT_PUBLIC_IS_LOCAL" in .env.production.local. I could do the same for CI.

[Janpot]

There's the use-case of distributing a prebuilt Next.js application as a Docker image. Allowing users to configure their instance through environment variables when they run a container from your image. How can the Next.js application access these variables in middleware?

edit

I just noticed that process.env.MY_VARIABLE is available when I reference it in my code, and its value is whatever was in process.env when the node process started. So it looks like we can load environment variables at runtime in _middleware.

[bb-in-hoodie]

The only other solution we can think of is mentioned here to perhaps load a JSON file at deployment time with config that would be included in the app, but it is somewhat awkward to use and requires changes to the way env vars are set by deployment systems and generally doesn't feel right. It'd be better if environment variables functioned as they do in other parts of the application.

it must be how does @beam-australia/react-env work. I've been using it in normal(?) nextjs code so far, but even this method seems not working in middleware.

As @Janpot says, our company also use docker image when deploying. Build process and run process are separated. So we also need a runtime env feature to apply different env var to each runtime container.

[jordie23]

Looks like runtime environment variables work in nextjs version 12.2.0. Not sure if it was introduced in a 12.1.* version as @Janpot mentions it working last month.

[HofmannZ]

Hi! 👋

We've created a package that adds support for runtime variables in Next.js: https://github.com/expatfile/next-runtime-env.

Feel free to give it a try! 😉

[schminkel]

Hi @HofmannZ, any news on how to get process.env working in middleware with the app dir?
Thanks!

[DominicWrege]

@JunkyDeLuxe, @moog16, and @mikaello - We're working hard to make the package work with the app dir! Expect some alpha releases end of next week 🚀

@DominicWrege - Next.js reads process.env at build time. It's a good practice only to build your container once and set the environment variables at runtime (read more). Next.js does not support this, hence the package ✌️

This was a bug and it was fixed 2 months ago.

[schminkel]

OK, tried it again and can confirm that accessing process.env.* from within the a middleware.ts file works in next.js v13.5.3.

[djpiper28]

I can confirm it works for me as well but only using process.env. (Pretty sure it is meant to be like that but will add a comment for any future dev making the same mistake that I did.)

import {env} from 'process';

env.YOUR_VAR; // undefined
process.env.YOUR_VAR // 'actually has a value'

[HofmannZ]

We fully support Nextjs 13 Server Components in our alpha releases. Check out our docs and examples here: https://github.com/expatfile/next-runtime-env/tree/development

[leerob]

I'm a bit confused here as I'm seeing conflicting reports:

I just noticed that process.env.MY_VARIABLE is available when I reference it in my code, and its value is whatever was in process.env when the node process started. So it looks like we can load environment variables at runtime in _middleware.

Could someone share more specifics, including their code snippet + Next.js version?

[FSeidinger-XI]

The problem shows, when a middleware function tries to access the environment. See a basic example below.

export async function middleware(request: NextRequest) {
  const value = env.NEXTAUTH_URL;

  // Grant access
  return NextResponse.next()
}

When running this code you will get an error.

A Node.js module is loaded ('process' at line 1) which is not supported in the Edge Runtime.
Learn More: https://nextjs.org/docs/messages/node-module-in-edge-runtime

The reason for this is, that a the time the middleware function is called, the node instance is not initialized yet and therefore has no access to the process environment.

I'm no expert, but the process environment should be available to all parts of the application. Even for infrastructure parts like middlewares.

[leerob]

Hey everyone – we have just published new documentation on self-hosting, including how to configure a custom cache handler for use with ISR / Data Cache in both the Pages and App Router. These docs go in depth about how other features like Image Optimization, Middleware, Environment Variables, Build Caching, and more work when self-hosted. There's also updated Docker based examples.

Specific to this discussion, we have provided guidance on how to use runtime environment variables.

https://nextjs.org/docs/app/building-your-application/deploying

[FSeidinger-XI]

This is for a fully loaded next.js app. Not e.g. the middleware. See my comment above.