Issue with grabbing db Info with graphql for use in nextjs

I am trying to get Fauna dB to work with nextjs through Apollo but I keep getting stuck. Whether that be I did it wrong or something else I just want a solution at this point. Also the most recent error I got with it was:

POST http://localhost:3000/graphql 404

Here is the Apollo client script bit

import {
    ApolloClient,
    InMemoryCache,
    createHttpLink,
} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
  
const httpLink = createHttpLink({
    uri: process.env.FAUNADB_GRAPHQL_URL,
});
  
const authLink = setContext((_, { headers }) => { 
    const faunaKey = process.env.FAUNA_ADMIN_KEY;
    return {
      headers: { 
        ...headers,
        authorization: `Bearer ${faunaKey}`,
      }
    }
});
  
export const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
});

Any help would be appreciated

I have tried switching to something else but I still could not get anything, also I have tried looking for tutorials but most are out of date (e.g. The with-fauna nextjs example it does not work for me).

It turns out that in my .local.env file wasnt working, so NEXT_PUBLIC_FAUNA_ADMIN_KEY allowed the browser to access the key, But that is a security risk parsing it to the browser. So i need a safe way to to store keys.