Environment variables and bindings on `env`

[GregBrimble]

Next.js has it's own API design for getServerSideProps() and the Edge API Routes and Middleware take only the NextRequest object as its single parameter. This means that passing Workers' env object which contains environment variables and bindings isn't immediately obvious.

One idea is to 'pollute' the global space and access things by request. This has the advantage of being similar to how it works today, but might be too far into the uncanny valley.

For example:

import type { NextRequest } from 'next/server'

export const config = {
  runtime: 'experimental-edge'
}

export default async function(req: NextRequest) {
  const value = process.env[req].MY_ENV_VAR
}

Another might be to use the @cloudflare/next-on-pages package as a runtime library which is different enough to be intentional, but still fundamentally works the same way:

import type { NextRequest } from 'next/server'
import { env } from '@cloudflare/next-on-pages'

export const config = {
  runtime: 'experimental-edge'
}

export default async function(req: NextRequest) {
  const value = env(req, 'MY_ENV_VAR')
}

What do y'all think? Any preferences? Any other ideas?

[bluebeel]

Why not extend NextRequest?
Next ignores the properties added to the object. So we can add what we want to the Request object. Then we just have to provide a type CfNextRequest = NextRequest & { env: Record<string, unknown> } via the @cloudflare/next-on-pages lib.

export default {
  async fetch(request, env, context) {
    const { pathname } = new URL(request.url);
    const routes = routesMatcher({ request }, __CONFIG__.routes);

   // link env to request object
   request.env = env;

    for (const route of routes) {
      if ("middlewarePath" in route && route.middlewarePath in __MIDDLEWARE__) {
        return await __MIDDLEWARE__[route.middlewarePath].entrypoint.default(
          request,
          context
        );
      }
    }

    for (const { matchers, entrypoint } of Object.values(__FUNCTIONS__)) {
      let found = false;
      for (const matcher of matchers) {
        if (matcher.regexp) {
          if (pathname.match(new RegExp(matcher?.regexp))) {
            found = true;
            break;
          }
        }
      }

      if (found) {
        return entrypoint.default(request, context);
      }
    }

    return env.ASSETS.fetch(request);
  },
} as ExportedHandler<{ ASSETS: Fetcher }>;

and we have

import { CfNextRequest } from '@cloudflare/next-on-pages'

export const config = {
  runtime: 'experimental-edge'
}

export default async function(req: CfNextRequest) {
  const value = req.env.MY_ENV_VAR
}

[mrkstwrt]

Any plans to add env to this package soon or are pull request along the lines of @bluebeel's suggestion welcome? This is a pretty critical feature in my opinion.

[kamranayub]

For the life of me I cannot figure out how to get geo info (req.cf in the worker API). I wonder if this is related?

[derekyau]

What is the current way in which you access ENV variables in a NextJS experimental-edge app on Cloudflare? I can't seem to figure this out...

[Hades32]

@mrkstwrt I see you made a fork with that change. Did it work for you? It doesn't seem to do anything for me...

[Hades32]

@GregBrimble this is super frustrating. Just wasted a few hours trying to get this to work as it makes Functions basically useless to me. Is there any workaround at the moment?

[luca-rath]

Hi @Hades32,
I just stumbled across the same issue but I've found a workaround.
If you adjust your next.config.js like in the following example, you can use process.env.API_KEY and process.env.OTHER_SECRET in your edge api routes.

const { EnvironmentPlugin } = require('webpack');

/** @type {import('next').NextConfig} */
const nextConfig = {
    // ...
    webpack(config) {
        config.plugins.push(new EnvironmentPlugin(['API_KEY', 'OTHER_SECRET']));

        return config;
    },
};

[mrkstwrt]

Hi @Hades32,
I just stumbled across the same issue but I've found a workaround.
If you adjust your next.config.js like in the following example, you can use process.env.API_KEY and process.env.OTHER_SECRET in your edge api routes.

const { EnvironmentPlugin } = require('webpack');

/** @type {import('next').NextConfig} */
const nextConfig = {
    // ...
    webpack(config) {
        config.plugins.push(new EnvironmentPlugin(['API_KEY', 'OTHER_SECRET']));

        return config;
    },
};

Isn't that the same as using the env config and will expose all the provided secrets in the frontend bundle too?

[luca-rath]

@mrkstwrt Thanks for the hint! To be honest, I didn't think of that 😅 But I just checked, as long as you don't put process.env.API_KEY in any of your client components, it won't be included in the client bundle. So I'll continue to use it, but I totally agree that there should be a better solution for this.

[Hades32]

@luca-rath thanks, but does that really work for binding, too? That's the real issue I'm facing

[hyunjunian]

I am very much looking forward to this.

[muslax]

Wow, have been waiting for this since Next 13 release. Thanks @luca-rath and you all. 🚀

[muslax]

For me still doesn't work for binding... 😢

[jokull]

Here's the changes needed. Hopefully this person makes a PR, this is very valuable. main...YuheiNakasaka:next-on-pages:feature/add-env-to-functions