Next.js Preview using @prismicio/client@^6.0.0

beamer · January 10, 2022, 8:00pm

I've done my best following this guide: https://prismic.io/docs/technologies/previews-nextjs

while also following this migration: @prismicio/client v6 Migration Guide - Prismic

Right now it seems everything works. I hit preview, it opens my localhost, it goes to the page, it shows the loader, then it seems to refresh and error.

I tried to fit everything in this gist: [slug].tsx · GitHub

Any helpers would be huge thanks

Phil · January 11, 2022, 10:08am

Hi @beamer,

The preview documentation in the Next.js docs is not currently compatible with version v6 of @prismic/client, we're are currently working on releasing a much easier to use Next.js preview implementation in the following few weeks. Once this is released we'll update you here.

For the moment if you want to use previews with Next.js is best to stay on client v5.

Thanks.

juskeviciusarn · January 11, 2022, 12:27pm

Hello @beamer @Phil I have same issue,
managed to hack working solution. You can use it while prismic update with official docs

// file name preview.ts
import * as prismic from '@prismicio/client'
import { linkResolver } from 'prismic/LinkResolver'
import { serialize } from 'cookie'

const accessToken = 'your token'
const repoName = 'your reponame'

const Preview = async (req, res) => {
  const { token, documentId } = req.query
  const endpoint = prismic.getEndpoint(repoName)
  const client = prismic.createClient(endpoint, {
    accessToken
  })

  client.enableAutoPreviewsFromReq(req)

  const redirectUrl = await client.resolvePreviewURL({
    linkResolver,
    defaultURL: '/',
    documentID: documentId,
    previewToken: token
  })

  res.setHeader('Set-Cookie', serialize('Preview_url', req.url, { path: '/' }))
  res.setPreviewData({ ref: token })
  res.writeHead(302, { Location: `${redirectUrl}` })
  res.end()
}

export default Preview

I'm using

"next": "^12.0.1",
"@prismicio/client": "6.0.0",

Priyanka · January 11, 2022, 1:05pm

Hello @juskeviciusarn

Yes, that's the way you can get work Previews in your Next.js Project. Thanks.

@beamer, I have checked your project code. You are currently passing req in the Client function, but it needs to be set up differently.

You need to enable the client to automatically query content from a preview session if one is active in server environments. This is disabled by default on the server. This change was made to make it very clear how the req object will be used.

You need to set req in client.enableAutoPreviewsFromReq(req). It will enable automatic previews from a server Request object.

Let me know if that doesn't fix it and I'll look again.

Thanks,
Priyanka

beamer · January 13, 2022, 6:42pm

@everyone thank you for your help!! I'll try to implement this today and post any notes

beamer · January 13, 2022, 8:48pm

@juskeviciusarn @Priyanka ok getting close.

Do you have an example of your getStaticProps that works with this?

My current:

export async function getStaticProps(context: GetStaticPropsContext) {
  const previewRef = context.previewData ? context.previewData["ref"] : null
  const refOption = previewRef ? { ref: previewRef } : null

  console.log("context.previewData", context.previewData)

  const page = await Client().getByUID(
    "page",
    context.params.slug as string,
    refOption
  )

  console.log(page)

  return {
    props: { page: { ...page.data, id: page.id }, previewRef },
  }
}

Loggers all seem correct, then it calls exit-preview and errors:

error - TypeError: Cannot read properties of null (reading 'predicates')

romain · January 14, 2022, 7:55am

I can't get it work either. I've tried implementing the solution stated above but I keep getting a 500 error on production.

Here is my preview api route :

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const { token: ref, documentId } = req.query;

  PrismicClient().enableAutoPreviewsFromReq(req);

  if (typeof ref === 'string' && typeof documentId === 'string') {
    const redirectUrl = await PrismicClient(req).resolvePreviewURL({
      linkResolver,
      defaultURL: '/',
      documentID: documentId,
      previewToken: ref,
    });

    if (!redirectUrl) {
      return res.status(401).json({ message: 'Invalid token' });
    }

    // When removing ...
    res.setHeader(
      'Set-Cookie',
      serialize('Preview_url', req.url, { path: '/' })
    );
    res.setPreviewData({ ref });
    // this it works => no 500 but no data obviously

    res.writeHead(302, {
      Location: `${redirectUrl}`,
    });
    return res.end();
  }

  return res.status(404).json({ message: 'ref not found' });
};

And here is my getStaticProps if needed :

export const getStaticProps: GetStaticProps = async ({
  previewData,
  locale,
}: GetStaticPropsContext) => {
  // @ts-ignore
  const previewRef = previewData ? previewData.ref : null;
  const refOption = previewRef ? { ref: previewRef } : null;
  const lang = nextLocaleToPrismicLocale(locale);

  const doc: PrismicDocument | null = await homePageQuery(refOption, lang);
  const footer: PrismicDocument | null = await footerQuery(refOption, lang);

  const serviceCategoriesData = await getServiceCategories();
  const serviceCategories = serviceCategoriesData?.data?.categories || [];
  const docWithIdsAddedToSlices = addUniqueIdsToSlices(doc);

  console.log(process.env.NODE_ENV);
  console.log('previewRef', previewRef);

  return {
    props: {
      previewRef,
      footer,
      doc: docWithIdsAddedToSlices,
      locale,
      serviceCategories,
      // Will be passed to the page component as props
      ...(await serverSideTranslations(locale, [
        'common',
        'dataset',
        'SupplierSearchForm',
        'FaqQuestions',
      ])),
    },
  };
};

juskeviciusarn · January 14, 2022, 11:59am

@beamer are you using slice machine?
My data fetching looks something like this. next-slicezone - npm

juskeviciusarn · January 14, 2022, 12:06pm

@romain I guess you are not using slicemachine.

I'm not familiar with prismic-client v6 that much. But if you data fetching part is working correctly? What I mean, is your serviceCategoriesData returns data with preview data?

Because at this point, you will pass data to components which will be rendered. So we have to get preview before return.

romain · January 14, 2022, 1:56pm

Yes my data fetching was working correctly. I managed to find the solution. The error came from my next-i18next config where I had to add this line

    localePath: path.resolve('./public/locales'),

I guess the problem was in my getStaticProps where I was awaiting serverSideTranslations but it couldn't find my locales.

Anyway thank you guys for the help!

Priyanka · January 14, 2022, 8:55pm

Hello @beamer,

That error happens because null is an invalid input for the options parameter. That line could be changed to this:

const refOption = previewRef ? { ref: previewRef } : undefined
or
const refOption = previewRef ? { ref: previewRef } : {}

But we would actually recommend using the queryContentFromRef() method instead.

You can see an example of a createClient() function and how it’s used. I am sharing zip files with you.

pages.zip (4.8 KB)
prismicConfiguration.js.zip (641 Bytes)

Used getStaticProps in a pages.
The createClient function in a prismicConfiguration.js file.
Used resolvePreviewURL in a "preview.js' file.

Let me know if you have any further questions related to it.

Thanks,
Priyanka

beamer · January 15, 2022, 1:55am

@Priyanka this is SO helpful. I don't know where I got the code previously - i thought i was doing best practices. I don't think i realized the new docs were still coming out.

ok so i'm close! i believe this is working. but do you mind sharing me your SliceZone component from components/post?

In this project I was using SliceZone from @prismicio/react

but in another project I've hacked together a working next-slicezone - but there was a slice capitalization issue. I made a workaround that maps the names to camel case but - requires some manual attention.

I feel like i'm just doing it wrong

Thanks!

beamer · January 15, 2022, 2:01am

should i be using this?

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

beamer · January 15, 2022, 2:37am

a-ha i see now

Upgrading from next-slicezone
from @prismicio/react replaces the component from the next-slicezone package.

I can probably figure it out from here but this was a great help

Priyanka · January 17, 2022, 9:23am

I am glad that it works for you. Let us know if you have any questions.

romain · January 19, 2022, 8:51pm

Hello I'm still experiencing some issues with the new prismic client (v6) and previews.

I've noticed that the getByID method does not work if you use a doc id for a document that is in another locale than the default one. For example, my repo default locale is in fr-fr so this works

  const TestFR = await PrismicClient().getByID('YaeTGBMAACwAvDyO');

But this does not work

const TestEN = await PrismicClient().getByID('YbcIJRUAAC0Anw66')

unless I specifically add the lang in params like this

 const TestEN = await PrismicClient().getByID('YbcIJRUAAC0Anw66', {
    lang: 'en-gb',
  });

So the problem is that the resolvePreviewURL is not returning any document when trying to preview a "en-gb" document because it does not find it, here is the part causing this :

if (documentID != null) {
	const document = await this.getByID(documentID, {
		ref: previewToken,
	});

So basically preview does work for fr-fr docs but as soon as I try to preview a doc from another locale preview breaks, here is the error

PrismicError: No documents were returned

sarah1 · January 19, 2022, 9:50pm

+1 - I am having the exact same issue when previewing non master locales.
Master locale previews work fine (published and unpublished content), but I cannot preview data from any non master locale. I get the same error.

Priyanka · January 20, 2022, 1:10pm

Hello @romain @sarah1

You need to pass lang params option even though you are querying the document with the ID. To solve your previews issue, I need more details:

How did you configure the link resolver?
How are you initializing the Client?

It would be better to share your project (either GitHub URL or Zip file) with us. You can share with me by Private message.

Thanks,
Priyanka

Priyanka · January 24, 2022, 4:44pm

Hello @romain

I have looked into your files. I could not find next.config.js into that.
In nextjs, there are different properties available for language redirection, such as locale, locales, and defaultLocale . These properties need to be used in next.config.js.

Please find more details

In next.config.js from our example project
Nextjs documentation on routing

Let me know if you have further questions.

Thanks,
Priyanka

Priyanka · January 24, 2022, 9:20pm

Hello @romain @sarah1

It's a known issue with @prismicio/client version 6.0.0. If you have the older version, can you update @prismicio/client to v6.1.0? It includes a fix for previewing documents from locales other than the master locale.

Thanks,
Priyanka

Topic		Replies	Views
Guide for preview in Next js still in client v5 Developing with Prismic nextjs	2	585	January 28, 2022
Nextjs Previews Developing with Prismic nextjs	6	325	May 18, 2024
Next JS Preview using prismic-javascript with getStaticProps Developing with Prismic nextjs	5	2322	December 9, 2021
Setting up Preview with NextJS Developing with Prismic nextjs	1	429	March 29, 2022
Previewing unpublished pages w/ Next JS Developing with Prismic nextjs	3	151	April 4, 2024

Next.js Preview using @prismicio/client@^6.0.0

Related topics