Preview page works, but get a shareable link does not work

Developing with Prismic
1

I'm using

  • next: 14.2.4 -> using the app directory
  • @prismicio/client: 7.6.0
  • @prismicio/next: 1.6.0
  • @prismicio/react: 2.8.0

Issue

I am able to preview the blog page. However when I click "get a shareable link" and copy it over into an incognito window to load the page, 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?

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

Hi Nick,

Sometimes, incognito blocks 3rd party cookies, which is essential to making this feature work.

Can you try this instead in a different browser.

Thanks.