Currently, I am diving into the world of NextJS13 and following a blog tutorial by Sonny Sangha called 'Let’s build a BLOG with Next.js 13 (Sanity v3, TypeScript, Tailwind CSS, Auth, CMS, Preview Mode)'. After completing the tutorial, my goal is to deploy the site on Vercel. However, I've encountered an issue:
app/(user)/page.tsx "query is not valid Page export Field
The problematic code snippet for that particular page is shown below:
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 attempted using getstaticprops but it seems like that approach is outdated in nextjs13. I am uncertain about other methods to query sanity.io without exporting the query (this is my first time working with nextjs). Any guidance or assistance on this matter would be highly appreciated.