可共享预览链接已损坏，但预览有效。 Prismicio + NextJs

Question

问题

我正在使用 prismicio 并致力于启用预览功能。预览功能有效。不起作用的是，当我单击“获取可共享链接”并将其复制到隐身窗口以加载页面时。然后我得到了 404。

我的问题

我需要执行任何特殊操作才能启用可共享链接吗？为什么预览按钮可以工作，而这个却不起作用？我需要在 prismic 上进行更多配置吗？我已经添加了预览 api url。不太确定从这里去哪里启用可共享链接？

背景

我正在使用

• 下一步：14.2.4 -> 使用应用程序目录
• @prismicio/客户端：7.6.0
• @prismicio/下一个：1.6.0
• @prismicio/反应：2.8.0

我的代码

我的应用>预览>route.js文件：

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

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

我的 prismicio 文件是标准的

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
}

我的应用>博客>[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} />
}

Answer 1

Prismic 预览依赖第 3 方 cookie 才能与“常规”预览和“可共享链接”预览正常工作。

默认情况下，在隐身会话中禁用第 3 方 Cookie，因此预览在其他会话中不起作用。在其他浏览器中尝试共享链接应该可以。

Prismic 意识到，到今年年底，所有 Chrome 浏览器上将默认禁用第 3 方 Cookie，并且正在研究一种解决方法，以使预览仍然有效。