search

Home  >  Q&A  >  body text

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

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.

P粉147045274P粉147045274314 days ago528

reply all(1)I'll reply

  • P粉465675962

    P粉4656759622024-01-05 14:30:03

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

    reply
    0
  • Cancelreply