Unable to view sharable link to a non prismic user

niki.brown · December 17, 2020, 11:15pm

Hello prismic support team!

I might be misunderstanding how the sharable preview link works or I'm running into an issue.

I've set up a preview at my site at this url https://dd-sample-next-js-blog.nikibrown.vercel.app and this is working correctly for me. I am able to view this when I am logged in as my prismic user, but if I share this to a coworker they see a blank page. I think I have things for preview set up correctly as I cloned the next.js blog project from here: https://user-guides.prismic.io/en/articles/2882569-sample-blog-with-api-based-cms-in-next-js

You can find my github repo here https://github.com/nikibrown/dd-sample-next-js-blog
And my prismic repo here https://dd-sample-next-js-blog.prismic.io/

From what I am assuming this url for example in the screenshot should allow anyone to preview the unpublished content. In this case I'm trying to share unpublished blog posts that are part of a release. Screenshot:

Thanks!

Niki Brown

Pau · December 21, 2020, 9:42pm

Hello Niki, thank you for reaching out. This is a known issue we're aware of and already tracking.

We will work on making enhancements to the preview functionality with Next.js in the future, but without a rough ETA for the moment. So, unfortunately there's still no workaround to make the sharable link work. As soon as we make progress or have any news about this we'll let everyone know in this same thread.

niki.brown · December 22, 2020, 7:44pm

@Pau It might be good to disable the display of the link if its known that this feature is broken. I did a product demo to my whole team and it was frustrating that it did not work. The preview functionality without building is one of the reasons why we are switching platforms. It would be nice if Prismic would clearly label things as "beta" if they are not ready to be used. Even if this was working at one point you should remove it.

Thanks,

N

Pau · December 23, 2020, 1:44am

Thank you very much for the feedback, I'll be sure to mention this to the product team.
And, whenever I have news about this issue getting fixed I'll let you know.

system · December 31, 2020, 6:55pm

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.

Fares · March 10, 2021, 5:59pm

Hi,

A fix that is related to this issue has been released, can you please check?

Fares · April 2, 2021, 8:56am

This issue has been closed due to inactivity. Flag to reopen.

jrodriguez · April 26, 2021, 11:02pm

Hi @Fares,

You mentioned something about a fix related to this issue been released, but we're still experiencing it. Our previews work like a charm, except when giving a sharable link to a non prismic user. We're using Next.js too.

Fares · April 27, 2021, 2:01pm

@jrodriguez I'm really sorry for the confusion; this issue is in work now and wasn't released.

I will let you know if I get any updates.

Fares · July 29, 2021, 2:21pm

This thread is being monitored as an open ticket in the issue tracker. We will update this post as we get more information. If you have a similar use-case, you can ‘Flag’ this topic to reopen.

saurish · December 13, 2021, 9:57am

@Fares Is there an update on a fix for this issue ?
Still facing the same bug with shareable links.

Phil · December 13, 2021, 12:08pm

Hi @saurish,

You should be able to use shareable links with Next.js if you follow the set-up here, although because of the way that Next.js's preview system works there is still an issue with shareable links for unpublished documents:

The team is working on a prismic-next plugin that should hopefully resolve this issue, it will be released in BETA in January (Fingers crossed):

github.com/prismicio/prismic-next

RFC: @prismicio/next alpha feedback

opened 03:47PM - 17 Nov 21 UTC

dayhaysoos

## Overview `@prismic/next` is a new package designed for making Prismic easi…er to use with a NextJS project. The original RFC from @angeloashmore and provides more background: https://github.com/prismicio/prismic-next/issues/1 At the moment, the package is mostly focused around making it easier to to set up Prismic Previews with Next. As Next and/or Prismic itself release more updates, it's possible that this package could grow and adapt to whatever new features come out if necessary. For this RFC, we'd like to gather feedback on the implementation from a developer experience perspective. Should we be doing more, should we be doing less? Could things be done in an easier, simpler way for the end user? ### `enableClientServerSupport` ```js export const enableClientServerSupport = ( config: EnableClientServerSupportConfig, ): void => { if ("context" in config && config.context) { const previewData = config.context.previewData; if (isPrismicNextPreviewData(previewData) && previewData.ref) { config.client.queryContentFromRef(previewData.ref); } } else if ("req" in config && config.req) { config.client.enableAutoPreviewsFromReq(config.req); } }; ``` enableClientServerSupport is a function that allows the end user to enable Previews with either `PreviewData` coming from NextJS context or a Prismic ref coming from the NextApiRequest. It's intended to be used in an end users `createClient()` function, like this: ```js import { enableClientServerSupport, CreateClientConfig } from 'prismic-next'; export const createClient = (config: CreateClientConfig) => { const client = Prismic.createClient(apiEndpoint); enableClientServerSupport({ client, context: config.context, req: config.req, }); return client; }; ``` One thing we've been wondering is whether or not `@prismic/next` should offer its own `createClient` function that would run `enableClientServerSupport` under the hood. On one hand, it'd be nice to not have to worry about creating your own client, however, the fear is that we might deal with feature creep as users might have more needs with creating client outside of what we provide. Would love to get feedback on whether or not we might want to provide one on our own or leave it as is. ### `<PrismicPreview />` The PrismicPreview component is to be wrapped around the entire NextJS app. There are two reasons why we have this component: 1. It's job is to add the PrismicToolbar to a NextJS app, there's a required param called `repoName` where you just pass it the name of your Prismic Repo and the correct URL for the toolbar is added in the necessary `<script />` tag. 2. There is a useEffect hook that adds event listeners that come from the Prismic Toolbar, so it can properly update when the Preview URL is triggered. It's listening for both `prismicPreviewUpdate` and `prismicPreviewEnd`. By default, the updatePreviewURL is `/api/preview` and the exitPreviewURL is `/api/exit-preview`. The end user has an option to override both of those by passing their own URLs to the props. Here's what it looks like in usage: ```js import { PrismicPreview } from 'prismic-next'; function MyApp({ Component, pageProps }: AppProps) { return ( <PrismicPreview repoName='smashing-mag-nick-1'> <Component {...pageProps} />; </PrismicPreview> ); } export default MyApp; ``` ### `setPreviewData` & `redirectToPreviewURL` These are actually really straight forward, to be used when the `prismicUpdatePreview` event gets triggered from the toolbar. Usage: ```js import { linkResolver, createClient } from '../../prismic-config'; import * as prismicNext from 'prismic-next'; import { NextApiRequest, NextApiResponse } from 'next'; export default async (req: NextApiRequest, res: NextApiResponse) => { const client = createClient({ req }); prismicNext.setPreviewData({ req, res }); await prismicNext.redirectToPreviewURL({ res, client, linkResolver }); }; ``` Here is how they look under the hood: `redirectToPreviewURL` ```js import { NextApiResponse } from "next"; import { Client } from "@prismicio/client"; import { LinkResolverFunction } from "@prismicio/helpers"; export type PreviewConfig = { res: NextApiResponse; client: Client; linkResolver: LinkResolverFunction; }; export async function redirectToPreviewURL({ res, client, linkResolver, }: PreviewConfig): Promise<void> { const previewUrl = await client.resolvePreviewURL({ linkResolver, defaultURL: "/", }); res.redirect(previewUrl); } ``` `setPreviewData` ```js import { NextApiResponse, NextApiRequest } from "next"; export type PreviewConfig = { req: NextApiRequest; res: NextApiResponse; }; export async function setPreviewData({ req, res, }: PreviewConfig): Promise<void> { const { token: ref } = req.query; res.setPreviewData({ ref }); } ``` ### `exitPreview` This one is also pretty straight forward. Usage: ```js import { NextApiResponse } from 'next'; import { exitPreview } from 'prismic-next'; export default async function exit(_: any, res: NextApiResponse) { exitPreview(_, res); } ``` Under the hood: ```js export async function exitPreview(_: any, res: NextApiResponse): Promise<void> { // Exit the current user from "Preview Mode". This function accepts no args. res.clearPreviewData(); // Redirect the user back to the index page. res.writeHead(307, { Location: "/" }); res.end(); } ``` ### Note There is still some feedback left on these implementations that have yet to be applied, the intent of this RFC is to really focus on the end user usage, not collect feedback on the Pull Request itself. If you do want to give feedback about code quality, feel free to leave that feedback on the PR: #3

Thanks.

phillip_pan · July 11, 2022, 11:07am

Hi,
Any updates on this issue? Still facing the same problem with shareable links here, or perhaps is a new bug?

Pau · July 12, 2022, 1:18am

Hello @phillip_pan can you describe your issue in more detail?
We haven't had any problems with shareable links lately, they should be working just fine with the new kit.

phillip_pan · July 12, 2022, 8:46am

Hi @Pau,
Thanks for the reply, the problem can be reproduced through the following steps.

Create a multiple changes release
Click the preview button
Generate the shareable link

image423×677 18.9 KB
Share it with others

The shareable preview link is working fine when I open it up myself, but it didn't work when showing it to others. Even when sharing to Prismic users (Same Prismic repo).

Pau · July 13, 2022, 1:56am

Have you made sure that the toolbar script is added to every page in your application? sometimes the toolbar will show up on a certain page because there's a linked document that gets detected by the toolbar, a menu bar, or an information card, and the main page gets ignored.

kris · July 19, 2022, 11:00am

@Pau I'm having the same problem. I can't use @prismic/next package just yet since the project is using client v4 and we are not yet ready to upgrade to v6.

Previews are working great and the share links are working when opening myself in the same browser. However, when I try to open them in another browser as a non logged in user, nothing happens - the page just opens with no toolbar enabled.

From the console.log, I can see the previewData is not set and it looks like the /api/preview endpoint is not hit at all (as opposed to normal Previews).

This is quite urgent as my client can't share links with colleagues, so any assistance will be greatly appreciated.

There are no errors in the console.

Looks like the main problem is that the preview link doesn't hit /preview/api which means that my Next.js app doesn't realise that it's a preview link, therefore it renders the page as normal

I just noticed that the repository has Private API access (with access token) - and that probably impacts if I can share to non-prismic users. Is there a way to share to non-prismic users while keeping it as a Private API?

Edit: I set the API to Public temporarily but this didn't fix the problem

Topic		Replies	Views
Preview sharable links are dropping 404 in Next.js Developing with Prismic nextjs	3	27	April 8, 2024
Shareable preview link gives blank page Developing with Prismic nextjs	15	1541	December 9, 2021
Shareable link for prismic preview not working Developing with Prismic nuxtjs	10	920	December 9, 2021
Previewing unpublished pages w/ Next JS Developing with Prismic nextjs	3	57	April 4, 2024
Preview links flicker and 404 when using Next.js middleware in production builds Developing with Prismic nextjs	1	656	September 28, 2022

Unable to view sharable link to a non prismic user

Related Topics