2 Errors:

1. The method which you have used here to fetch the data is outdated.
2. The endpoint here is missing you will find it in the graphcms in your account : settings/access/api access /endpoints

Remove the command

const graphqlAPI = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT

and the .env file associated with it. After that use the following code:

import { gql } from 'graphql-request';
import { GraphQLClient } from 'graphql-request';

export const getPosts = async () => {
    
    // new endpoint
    const graphQLClient = new GraphQLClient(
        endpoint // here add your endpoint
    );

    const query = gql`
    query MyQuery {
        postsConnection {
            edges {
                node {
                    author {
                        bio
                        name
                        id
                        photo {
                            url
                        }
                    }
                    createdAt
                    slug
                    title
                    excerpt
                    featuredImage {
                        url
                    }
                    categories {
                        name
                        slug
                    }
            }
        }
        }
    }
    `
    const result = await graphQLClient.request(query)
    return result.PostsConnection;
}

Never Mind, its because the Next_endpoint wasnt defined, all good now!