NextJS and KeystoneJS website cant get GraphQL data (Error: No executable schema named 'public' is available)

I am currently making a NextJS website with KeystoneJS as the CMS. I can't find any good guides on how to set this up correctly so I have just jumped in. An issue that I am currently experiencing is that I am unable to request data from GraphQL. I can do it through the playground, just not the nextjs pages.

I have tried the following methods:

Axios => Module not found: Can't resolve 'async_hooks'

fetchAPI => Module not found: Can't resolve 'async_hooks'

getItems => Error: No executable schema named 'public' is available. Have you setup '@keystonejs/app-graphql'?

I am pretty sure that I should be using getItems since it is imported from @/keystonejs/server-side-graphql-client. However I'm not sure if I have set it up correctly.

My current project setup is installing KeystoneJS - Blank template. and then I have manually installed NextJS based on the installation guide. My module exports looks like this:

module.exports = {
    keystone,
    apps: [
        new GraphQLApp(),
        new AdminUIApp({
            name: PROJECT_NAME,
            enableDefaultRoute: false,
            authStrategy,
            isAccessAllowed: isAdmin,
        })
    ],
};

Here is my getItems request:

export async function getStaticProps() {
    const posts = await getItems({
        keystone,
        listKey: 'Post',
        returnFields: 'name'
    });
    console.log(posts);
    return {
        props: {
            posts,
        },
    }
};