Next.js Discord

Discord Forum

How to bypass nextJs environment variables limitations

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
I need access to my env variables at my next.config.mjs. I do not care about the nextJs "NEXT_PUBLIC" thing. Is there a way to bypass this?
This feature has hurt me so many times that it feels like a bug

27 Replies

Anay-208 | Ping in replies
umm I don't think you need to prefix NEXT_PUBLIC to get environment in config
James4u
NEXT_PUBLIC prefix is for something different
btw can you share your next config?
Yi Lon Ma
the good old trick of import 'dotenv/config' will work
or bun/nodejs flags if you want to use that
@James4u btw can you share your next config?
Masai LionOP
next.config.mjs can't access any environment variable:
import { PrismaPlugin } from "@prisma/nextjs-monorepo-workaround-plugin";
import env from "@diet-it/config";

/** @type {import('next').NextConfig} */
const nextConfig = {
    async rewrites() {
        return [
            {
                source: "/:path*",
                destination: `${env.deploy.backend.internal_url}/:path*`,
            },
        ];
    },
    // biome-ignore lint/suspicious/noExplicitAny: Não consigo consertar isso ainda
    webpack: (config: any, { isServer }: { isServer: boolean }) => {
        if (isServer) {
            config.plugins = [...config.plugins, new PrismaPlugin()];
        }

        return config;
    },
    typescript: {
        ignoreBuildErrors: true,
    },
};

export default nextConfig;

env.deploy.backend.internal_url is from my config package that resolves to process.env.BACKEND_INTERNAL_URL ?? http://localhost:3049. My BACKEND_INTERNAL_URL env is http://diet-it-backend.internal/
@Anay-208 | Ping in replies umm I don't think you need to prefix `NEXT_PUBLIC` to get environment in config
Masai LionOP
I quoted it in order to say I don't mind getting rid of ite entirely
@Yi Lon Ma the good old trick of `import 'dotenv/config'` will work
Masai LionOP
Unfortunately I've already tested it. NextJs filters it out.
When I import the same package on my backend server, it returns the correct environment both in production and in development. But when imported on next.config.ts, it returns undefined always.
Sorry for the late answer. Too many discord servers and I got lost
Yi Lon Ma
what's your name of env file
Masai LionOP
.env
By what I understand about import "dotenv/config", it pushes the .env values into the machine environment. NextJs env system filters happen after this process.
[Github discussion](https://github.com/vercel/next.js/discussions/27041) related
- "next dev"
+ "dotenv -e .env -- next dev"
Masai LionOP
but what do I don in production where I don't have a .env file?
I can create a .env file on the startup script, but I'd like to avoid if possible
Yi Lon Ma
are you using docker?
Masai LionOP
Kind of, fly.io
Yi Lon Ma
there must be build time variables
Masai LionOP
I already have them, unfortunately nextJs is unable to read them:
[env]
  WEB_URL = "https://diet-it-web.fly.dev/"
  BACKEND_INTERNAL_URL = "http://diet-it-backend.flycast/"
And I'm sure they are working as I ssh in the build machines and echo $BACKEND_INTERNAL_URL them to verify
Yi Lon Ma
well you might have to ask in vercel.community or in GitHub issues
Masai LionOP
I found a couple abandoned issues related to this, unfortunately.
Idk, I will try to make the rewrites manually using the routes
Masai LionOP
Created the discussion:
https://github.com/vercel/next.js/discussions/72093