Error occurs on a server-side rendered page in a specific project environment

[hanwool95]

Page to Investigate

Pages experiencing issues have already been resolved

Steps to Reproduce

Suspect it is a vercel environmental issue, so I brought up the issue posted on next.js issues

1. Occurs in certain cases when accessing a page rendered through server-side rendering.
2. It works well in another preview environment of feature branches targeting the same branch. Works well even in a local development environment. Working well means that the environment variables are read as intended on the server side, the logic is executed, and then rendered.

In the preview environment, the environment variables are read properly within the getServerSideProps function, but in the production environment, the environment variables are not read properly within the getServerSideProps function intermittently.

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const { cookie } = context.req.headers
  const token = getCookie(cookie, 'app_at')

  const headers: Record<string, string> = {
    'Content-Type': 'application/json',
  }

  if (token) headers['Authorization'] = `Bearer ${token}`
  try {
    const response = await fetch(`${process.env.API_URL}/api/route`, {
      method: 'GET',
      headers,
    })
    const status = response?.status
  
    if (status === 200) {
      const result = await response.json()
      const data = result.data
      if (data) {
        return {
          props: {
            data,
          },
        }
      }
      return {
        props: {
          data: null,
        },
      }
    } else {
      return { notFound: true }
    }
  } catch (e) {
    return {
      redirect: {
        destination: '/500',
      },
    }
  }
}

In this situation, the data is coming in as null.

return {
          props: {
            data,
            apiUrl: process.env.API_URL
            vercelEnv: process.env.VERCEL_ENV,
          },
        }

In the process of debugging the error, I sent process.env.API_URL down to props and logged it in console.log, but it was recorded as undefined. Additionally, I checked to see if VERCEL_ENV was displayed properly, and it was also displayed as undefined. (In the preview environment, it was clearly marked as “preview.”)

The strange thing is that if API_URL is undefined because the environment variable cannot be read, a fetch error occurs and it should go to 500, but it does not.

The API_URL environment variable is correctly set to Production. However, even the VERCEL_ENV system environment variable from Vercel cannot be read from getServerSideProps in the Production environment. In the preview environment, both API_URL and VERCEL_ENV are read correctly.

This logic has been working well in Production for over a year. However, around 4 a.m. UTC on May 28, 2024, an issue occurred during deployment. None of the deployed content changed the server-side rendering logic.

Our team eventually created a new vercel project and tested it by setting the same environment variables as the existing production, and there were no problems.
Therefore, the error has now been resolved by moving the production domain to a new project.

We still don't know what the exact cause is.