NextJS13+Sanity部署Vercel报错：query不是合法Page导出字段

API 探路者

2026-7-22

解决Next.js 13 App Router中"query is not valid Page export Field"部署错误

Next.js 13的App Router（app目录下的页面）对组件导出有严格限制，仅允许导出官方指定的特殊字段（如metadata、generateStaticParams等），自定义的query导出会被判定为无效字段，从而触发部署错误。

解决方案：

不要将查询语句作为页面组件的导出项，而是把它移到组件内部，或者封装成独立的复用模块：

方案1：将查询移到组件内部

修改app/(user)/page.tsx代码如下：

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

export default async function HomePage() {
  // 把查询语句放到组件内部
  const query = groq`
    *[_type == 'post'] {
      ...,
      author->,
      categories[]->,
    } | order(_createdAt desc)
  `;
  
  const posts = await client.fetch(query);
  return (
    <BlogList posts={posts} />
  );
}

方案2：封装为独立复用模块（适合多页面共用查询）

创建sanity/queries/posts.ts文件：

import { groq } from "next-sanity";

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

在页面中导入使用：

import { client } from "../../sanity/lib/client"
import { getAllPostsQuery } from "../../sanity/queries/posts";
import BlogList from "../../components/BlogList";

export default async function HomePage() {
  const posts = await client.fetch(getAllPostsQuery);
  return (
    <BlogList posts={posts} />
  );
}