Error: Page export fields are invalid - Troubleshooting NextJS13 and Sanity.io deployment on Vercel

Question

I'm learning NextJS13 and following Sonny Sangha's online blogging tutorial "Let's build a blog using Next.js 13 (Sanity v3, TypeScript, Tailwind CSS, Auth, CMS, Preview Mode)". After completing this tutorial, I want to deploy the site to Vercel, but I run into this problem:

application/(user)/page.tsx "The exported field of the query page is invalid

The specific code of the relevant pages is as follows:

import { groq } from "next-sanity";
import { client } from "../../sanity/lib/client"
import BlogList from "../../components/BlogList";

export const query = groq`
  *[_type == 'post'] {
    ...,
    author->,
    categories[]->,
  } | order(_createdAt desc)
`;

export default async function HomePage() {

  const posts = await client.fetch(query);
  return (
    <BlogList posts = {posts} />
  );
}

I tried getstaticprops but apparently this is deprecated in nextjs13. And don't know how to query sanity.io without exporting the query (my first time building anything with nextjs). Any help would be greatly appreciated.

Answer 1

Just delete the export of query so that only the React component (HomePage) is exported.