Env variables undefined on deployed version of app [Next.js 15 + Apollo Client]

[mkh54]

Im using Next.js 15 App router + Apollo Client (GraphQL) with Turborepo, I have configured apollo client which should be using our graphql server url and it has resolvers to fetch the data. I do use useQuery() to fetch cms related data in our components.

Now the problem is when im running the app in local everything is working fine in fetching the data from cms. Since i have apollo client config and function in resolvers, i have added NEXT_PUBLIC_ prefix to env variables because this runs on client side. When i deploy this to our ci/cd and pass env vars from there, it is showing as undefined.

I have tired following but none of them worked:

1. Had added @t3-oss/env-nextjs library to read env vars assuming its helps vars to be available in run time also. This did not work.
2. Even if i use directly as process.env.NEXT_PUBLIC_GRAPHQL is not working.
3. In build i see all pages to be static rendered, assuming this could be problem, i have added dynamic import of Apollo provider wrapper in my layout.tsx. This did not work.
4. const dynamic = 'force-dynamic' adding this will remove the benefits of SSG right? . This did not work too when i had put in layout.tsx.

Isnt there a way to resolve this issue?

While i run the build i see ○ (Static) pre-rendered as static content, how do i make the app to not pre-render? I did add use client wherever required but did not find any change.

I felt that this page is static rendering so passing run time env variables is not possible and that's the issue. Should i consider anything about static rendering of all pages the problem? Pls suggest.

Example config of my app:

File: client.ts

 const createApolloClient =
    new ApolloClient({
        uri: env.NEXT_PUBLIC_GRAPHQL,
        cache: new InMemoryCache(),
        resolvers: {
            Query: {
                page: () => ({ __typename: 'Page' })
            },
            Page: {
                pageData: pageResolver()
            }
        }
    });

File: pageResolver.ts

const pageResolver = () => {
  const pageEnv = env.NEXT_PUBLIC_PAGE_ENV;
  const pageEnv = env.NEXT_PUBLIC_PAGE_API_URL;

  ... do something here ...
}

File: ApolloProvider.ts

const ApolloProvider = () => <ApolloProvider client={createApolloClient}>{children}</ApolloProvider>;

importing this ApolloProvider in layout.tsx.