CODEWITHSUNDEEP
next.jsprismic.ioprismic
Nick
Nick

Reputation: 285

Shareable preview link broken, but preview works. Prismicio + NextJs

Issue

I'm using Prismic.io and working on enabling the preview feature. The preview feature works. The thing that doesn't work is when I click "get a shareable link" and copy it over into an incognito window to load the page. Then I get a 404.

My Question

Do I need to do anything special to enable the Shareable Link? Why does the preview button work but this doesn't? Do i need to do more configuring on prismic? I have already added the preview api url. Not really sure where to go from here to enable the shareable link?

Context

I'm using

My Code

My app>preview>route.js file:

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

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

My prismicio file is standard

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
}

My app>blog>[uid]>page.js file

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} />
}

Upvotes: 0

Views: 54

Answers (1)

lihbr
lihbr

Reputation: 141

Prismic preview relies on 3rd-party cookies to work properly with "regular" previews and "shareable link" previews.

3rd-party cookies are disabled by default in incognito sessions, hence previews are not working other there. Trying the shareable link in another browser should work instead.

Prismic is aware that 3rd-party cookies will be disabled by default on all Chrome by the end of the year and is working on a workaround for previews to still work.

Upvotes: 0

Related Questions