Prismic切片HTML未在Next.js页面源码中显示的问题求助

你的问题出在两个核心点：缺少根布局提供HTML基础结构，以及Metadata配置不完整，导致页面源码没有必要的HTML标签和切片内容。

1. 缺少根布局（Root Layout） #

Next.js App Router 要求必须存在根布局文件（app/layout.tsx），它负责渲染<html>、<body>等页面基础骨架。你的首页组件直接返回SliceZone，没有被包裹在布局中，所以浏览器源码里不会生成<body>、<html>标签，Prismic切片的内容也无处挂载。

解决方法：创建/完善根布局 #

在app/layout.tsx中添加基础结构：

import type { Metadata } from "next";
import { ReactNode } from "react";

// 可选：设置站点默认元数据，会被页面级元数据覆盖
export const metadata: Metadata = {
  title: "Zolvecare",
  description: "Default site description",
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

2. Metadata配置不完整 #

你当前的generateMetadata只配置了openGraph和keywords，但没有设置顶层的title和description属性，这会导致页面不会生成<title>和<meta name="description">标签。

解决方法：补充Metadata顶层属性 #

修改generateMetadata函数：

export async function generateMetadata(): Promise<Metadata> {
  const client = createClient();
  const page = await client.getSingle("home_page");

  return {
    title: page.data.meta_title!, // 生成页面<title>标签
    description: page.data.meta_description!, // 生成<meta name="description">标签
    keywords: page.data.keywords,
    openGraph: {
      siteName: "Zolvecare",
      title: page.data.meta_title!,
      description: page.data.meta_description!,
      images: [
        {
          url: page.data.meta_image.url!,
          width: page.data.meta_image.dimensions?.width,
          height: page.data.meta_image.dimensions?.height,
        },
      ],
    },
  };
}

3. 优化：避免重复请求Prismic数据 #

你的Page组件和generateMetadata都调用了client.getSingle("home_page")，会触发两次相同的API请求。可以通过Next.js的缓存功能复用数据：

import { unstable_cache } from "next/cache";
import type { Metadata } from "next";
import { SliceZone } from "@prismicio/react";

import { createClient } from "~/prismicio";
import { components } from "~/slices/marketing";

// 缓存首页数据，避免重复请求
const getHomePage = unstable_cache(
  async () => {
    const client = createClient();
    return client.getSingle("home_page");
  },
  ["home-page-data"], // 缓存键
  { revalidate: 3600 } // 1小时重新验证一次
);

export default async function Page() {
  const page = await getHomePage();
  return <SliceZone slices={page.data.slices} components={components} />;
}

export async function generateMetadata(): Promise<Metadata> {
  const page = await getHomePage();
  return {
    title: page.data.meta_title!,
    description: page.data.meta_description!,
    keywords: page.data.keywords,
    openGraph: {
      siteName: "Zolvecare",
      title: page.data.meta_title!,
      description: page.data.meta_description!,
      images: [
        {
          url: page.data.meta_image.url!,
          width: page.data.meta_image.dimensions?.width,
          height: page.data.meta_image.dimensions?.height,
        },
      ],
    },
  };
}

完成以上修改后，重新构建或开发服务器，页面源码会包含完整的HTML骨架、<title>标签，以及Prismic切片渲染后的HTML内容。

内容的提问来源于stack exchange，提问作者Shawaze Ahmer