Next.js Discord

Discord Forum

How to bypass nextJs environment variables limitations

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Avatar
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

Avatar
Anay-208
umm I don't think you need to prefix NEXT_PUBLIC to get environment in config
Avatar
James4u (Tag me if needed)
NEXT_PUBLIC prefix is for something different
btw can you share your next config?
Avatar
Yi Lon Ma
the good old trick of import 'dotenv/config' will work
or bun/nodejs flags if you want to use that
Avatar
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/
I quoted it in order to say I don't mind getting rid of ite entirely
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
Avatar
Yi Lon Ma
what's your name of env file
Avatar
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
Avatar
Yi Lon Ma
load env vars while running dev, build or similar script
- "next dev"
+ "dotenv -e .env -- next dev"
Avatar
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
Avatar
Yi Lon Ma
are you using docker?
Avatar
Masai LionOP
Kind of, fly.io
Avatar
Yi Lon Ma
there must be build time variables
Avatar
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
Avatar
Yi Lon Ma
well you might have to ask in vercel.community or in GitHub issues
Avatar
Masai LionOP
I found a couple abandoned issues related to this, unfortunately.
Idk, I will try to make the rewrites manually using the routes
Avatar
Masai LionOP
Created the discussion:
https://github.com/vercel/next.js/discussions/72093