After trying all the suggested solutions on Stack Overflow and researching through previous questions, I have come here seeking help. I am using the latest version of NextJS (version 14) and encountering an issue with integrating GraphQL Apollo client into my application.
The main problem lies in dynamically changing the URI of the Apollo client based on the environment variable (NODE_ENV) set in the .env file. However, when I console.log(process.env), it returns an empty object in the browser console while displaying the expected values in my VS Code's console.
You can view my .env and .env.local files for reference:
https://i.stack.imgur.com/X1H3Z.png
Below is the code snippet for my Apollo Client:
import { ApolloClient, InMemoryCache } from "@apollo/client";
const CreateApolloClient = () => {
console.log(process.env, "PROCESS");
return new ApolloClient({
uri: `http://localhost:4000/graphql`,
cache: new InMemoryCache(),
});
};
export default CreateApolloClient;
I would appreciate any assistance or suggestions to resolve this issue. Please feel free to ask for more details if needed.