I work in VSCode on a Mac. Somehow, I found that my Next.js .env file isn’t being loaded correctly. To debug this, I added some log statements in next.config.js to check if the environment variables are being loaded properly for server-side not client-side:

// import { withContentlayer } from "next-contentlayer";

console.log('Next.js Environment Variables:', process.env);
console.log('GITHUB_ID is: ', process.env.GITHUB_ID)

const { withContentlayer } = require("next-contentlayer");

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: process.env.NODE_ENV === "development",
  swcMinify: true,
  images: {
    domains: [
      "avatars.githubusercontent.com",
      "weijunext.com",
      "smartexcel.cc",
    ],
  },
  async redirects() {
    return [
      {
        source: "/github",
        destination: "https://github.com/weijunext/smart-excel-ai",
        permanent: false,
      },
    ];
  },
};

// export default withContentlayer(nextConfig)
module.exports = withContentlayer(nextConfig);

when I run

npm run dev

in vscode integrated terminal, the debug log output the wrong lines, the GITHUB_ID should not be empty in my env file

  ...
  GOOGLE_ID: '',
  GITHUB_ID: '',
  ...

But when I run the same command npm run dev in my iTerm2 terminal, it outputs the correct values:

  GITHUB_ID: 'Iv23lixxxxxxxx',
  GITHUB_SECRET: '1b5b2xxxxxxxxxxxxxxxxxx',
  GOOGLE_ID: '123',
  GOOGLE_SECRET: '456',

My development env are

• nextjs 13.5.6
• macos sonoma 14.5
• vscode 1.91.1
• Shell /bin/zsh

Additionally, my .env file is located in the root directory of my Next.js project and contains the following:

...
GITHUB_ID=Iv23lixxxxxxxx
GITHUB_SECRET=1b5b2xxxxxxxxxxxxxxxxxx
GOOGLE_ID=123
GOOGLE_SECRET=456
...

Can anyone help me resolve this issue? I would really appreciate it.

I tried uninstall npm and use pnpm, it also results in the same. Some of the variables in my .env seems to be cached somewhere.