Prismic+Next.js可分享预览链接失效（404）问题求助

我正在使用Prismic.io并启用预览功能，预览功能可正常工作，但点击“获取可分享链接”后复制到无痕窗口打开页面时，会出现404错误。

我的疑问 #

• 启用可分享链接是否需要特殊配置？
• 为何预览按钮正常但可分享链接不行？
• 是否需要在Prismic上进行更多配置？我已添加预览API地址，但不确定如何启用可分享链接。

环境信息 #

• next: 14.2.4（使用app目录）
• @prismicio/client: 7.6.0
• @prismicio/next: 1.6.0
• @prismicio/react: 2.8.0

我的代码 #

app>preview>route.js文件： #

import { redirectToPreviewURL } from "@prismicio/next"
import { createClient } from "../../../prismicio"

export async function GET(request) {
  const client = createClient()
  return await redirectToPreviewURL({ client, request })
}

prismic文件（标准配置） #

import * as prismic from "@prismicio/client"
import * as prismicNext from "@prismicio/next"
import config from "../slicemachine.config.json"
export const repositoryName =
  process.env.NEXT_PUBLIC_PRISMIC_ENVIRONMENT || config.repositoryName
const routes = [
  {
    type: "BlogPost",
    path: "/blog/:uid",
  },
]
export const createClient = (config = {}) => {
  const client = prismic.createClient(repositoryName, {
    routes,
    fetchOptions:
      process.env.NODE_ENV === "production"
        ? { next: { tags: ["prismic"] }, cache: "force-cache" }
        : { next: { revalidate: 5 } },
    ...config,
  })

  prismicNext.enableAutoPreviews({
    client,
    previewData: config.previewData,
    req: config.req,
  })

  return client
}

app>blog>[uid]>page.js文件 #

import React from "react"
import BlogPage from "./BlogPage"
import { createClient } from "../../../prismicio"
import { notFound } from "next/navigation"

export async function generateStaticParams() {
  const client = createClient()
  const pages = await client.getAllByType("BlogPost")

  return pages.map((page) => {
    return { uid: page.uid }
  })
}

export async function generateMetadata({ params }) {
  try {
    const client = createClient()
    const page = await client.getByUID("BlogPost", params.uid)

    return {
      title: page.data.meta_title,
      description: page.data.meta_description,
    }
  } catch (error) {
    console.log("generateMetadata error", error)
  }
}

async function getPostFunc({ params }) {
  try {
    const client = createClient()
    const page = await client.getByUID("BlogPost", params.uid, {
      fetchLinks: ["author.name", "author.authorImage", "author.nameLink"],
    })

    console.log("getPostFunc page ", page)
    return { article: page }
  } catch (error) {
    console.log("getPostFunc error", error)
  }
}

export default async function Post({ params }) {
  const post = await getPostFunc({ params })

  if (!post || !post.article) {
    // Handle the case where the post or article is not found
    console.log("article not found")
    return notFound()
  }

  const { article } = post
  return <BlogPage article={article} />
}

解决方案 #

1. 修复预览路由的客户端初始化 #

可分享链接需要传递预览令牌，你的preview/route.js未将请求信息传入客户端，导致令牌无法被识别。修改代码：

import { redirectToPreviewURL } from "@prismicio/next"
import { createClient } from "../../../prismicio"

export async function GET(request) {
  // 传入request配置，让客户端能读取预览令牌
  const client = createClient({ request })
  return await redirectToPreviewURL({ client, request })
}

2. 页面组件需正确接收预览数据 #

无痕窗口没有Prismic登录会话，必须通过previewData传递预览信息，修改blog/[uid]/page.js的相关函数：

修改generateMetadata：

export async function generateMetadata({ params, previewData }) {
  try {
    const client = createClient({ previewData })
    const page = await client.getByUID("BlogPost", params.uid)

    return {
      title: page.data.meta_title,
      description: page.data.meta_description,
    }
  } catch (error) {
    console.log("generateMetadata error", error)
  }
}

修改getPostFunc：

async function getPostFunc({ params, previewData }) {
  try {
    const client = createClient({ previewData })
    const page = await client.getByUID("BlogPost", params.uid, {
      fetchLinks: ["author.name", "author.authorImage", "author.nameLink"],
    })

    console.log("getPostFunc page ", page)
    return { article: page }
  } catch (error) {
    console.log("getPostFunc error", error)
  }
}

修改默认组件参数：

export default async function Post({ params, previewData }) {
  const post = await getPostFunc({ params, previewData })

  if (!post || !post.article) {
    console.log("article not found")
    return notFound()
  }

  const { article } = post
  return <BlogPage article={article} />
}

3. 检查Prismic后台预览配置 #

确保Prismic后台的预览URL指向你的项目域名，且/preview路由能正常访问，可分享链接依赖该配置生成正确跳转地址。

问题原因说明 #

预览按钮在已登录Prismic的会话中打开，自动携带预览令牌；但无痕窗口无登录会话，必须通过链接中的令牌参数获取预览内容，之前的代码未正确传递该参数，导致无法加载预览数据，触发404。

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