process.env is an empty object in _middleware.ts

What version of Next.js are you using?

12.0.1

What version of Node.js are you using?

14.18.1

What browser are you using?

Brave

What operating system are you using?

macOS 11.5.2

How are you deploying your application?

npm run dev and Vercel

Describe the Bug

Accessing process.env returns an empty object {} in pages/_middleware.ts. This happens locally when running npm run dev and also when app is deployed to Vercel.

Expected Behavior

Following the Vercel edge functions docs, environment variables should be available via process.env. https://vercel.com/docs/concepts/functions/edge-functions#environment

To Reproduce

Create a middleware file pages/_middleware.ts:

import { NextResponse } from 'next/server';

export function middleware() {
  console.log(process.env);
  return NextResponse.next();
}

Start the app, visit any page of the app and inspect console output.

[Defite]

Hey @Defite where are you defining your env vars?

In next.config.js:

module.exports = {
  publicRuntimeConfig: {
    NEXT_PUBLIC_API_BASE: process.env.API_BASE,
    NEXT_PUBLIC_API_AUTH: process.env.API_AUTH,
  },
}

But then I realise to change vars to API_BASE and API_AUTH. Calling process.env.API_AUTH returns it’s value.

[hugefunwoo]

I believe it’s documented here https://nextjs.org/docs/api-reference/next.config.js/environment-variables

Next.js will replace process.env.customKey with ‘my-value’ at build time. Trying to destructure process.env variables won’t work due to the nature of webpack DefinePlugin.