app/ directory + Preview Mode

[pm0u]

I am attempting to set up a preview mode with Sanity on Next v13

According to the beta docs, there is a previewData function intended for server components: https://beta.nextjs.org/docs/api-reference/preview-data

However, when I try to use this in any server component (either page.js or component.server.js) I get an error on the page:

Unhandled Runtime Error
Error: Dynamic server usage: previewData

Call Stack
Object.staticGenerationBailout
webpack-internal:///(sc_server)/./node_modules/next/dist/client/components/static-generation-bailout.js (15:15)
previewData
webpack-internal:///(sc_server)/./node_modules/next/dist/client/components/headers.js (16:35)
LandingPage
webpack-internal:///(sc_server)/./app/[landingPageSlug]/page.js (16:78)
attemptResolveElement
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1167:42)
resolveModelToJSON
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1620:53)
Array.toJSON
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1081:40)
stringify
<anonymous>
processModelChunk
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (163:36)
retryTask
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1823:50)
performWork
webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1856:33)

How are we supposed to use this function?

Edit --

As expected, this also causes an error when used in generateStaticParams -- here's the test file for reference:

import { getClient } from "../../lib/sanity/index.server"
import { getLandingPageBySlug } from "../../helpers/sanity";
import { previewData } from 'next/headers'

const LandingPage = ({ params: {landingPageSlug} }) => {
  const preview = previewData();
  const isPreview = !!preview && preview.key === process.env.PREVIEW_SECRET
  console.log(preview)

  const landingPageData = getLandingPageBySlug(landingPageSlug)

  return <div>Page!</div>
}

export default LandingPage

export const generateStaticParams = async () => {
  const landingPages = await getClient().fetch(/* groq */ `*[_type == 'landingPage']{ pageSlug }`)

  return landingPages.map(landingPage => ({ landingPageSlug: landingPage.pageSlug.current}))
}

[jcq]

For me, I see it working fine until I add the generateStaticParams; commenting that out makes previewData work fine again in the main component.

What is the correct way to use it in conjunction w/ generateStaticParams?

[pm0u]

looking at the code for preview, it utilizes a function that causes an error if it's currently in static build, so it seems at least for now this is not possible at all

[rolldavid]

It seems like there's an issue when trying to use next/headers with generateStaticParams (see this comment). I'm also running into this implementing next-auth in the app directory - as soon as next/headers is used, generateStaticParams throws the above error when implemented anywhere in the folder structure. Hope this is addressed by the Next team soon.

@leerob wondering if this has been flagged yet or if there's a solution.

[williamiommi]

I guess that the 'previewData()' is the same as cookies() and headers() inside next/headers. According to the beta docs here, if you use one of those on page or layout will force dynamic rendering.

I'm not using generateStaticParams and I don't receive any errors at build time but what I can see is that if I use the previewData(), my pages are server-side rendered (λ). If I remove it, my pages are static.

I played around a bit also with the Route Segment Config options, setting the dynamic option to 'error' (according to the beta docs is the same as getStaticProps in pages) I receive an error at build time:

Error occurred prerendering page "/about". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Page with dynamic = "error" encountered dynamic data method /about.

I don't know if it's a bug or it's how should work also after the beta, but it looks like that as soon as you use the preview mode your pages are forced to be dynamic. If I'm not wrong this was not the case with the pages directory.

Anyway...as @rolldavid said, let's see if the Next team will give us an update, maybe there is a proper way to do it.

[davidhellmann]

Dump question. But do I have to set previewData like in nextjs 12? If I do it like in the docs preview data is all the time false. And what's your preview url? which parameters/tokens are set?
Iʼm new into the nextjs game. Sorry 😅

[davidhellmann]

That makes sense.

Tried something like this:

import type {NextApiRequest, NextApiResponse} from "next";

const Preview = async (req: NextApiRequest, res: NextApiResponse) => {

  const {
    siteId,
    uri,
    token,
    'x-craft-preview': xCraftPreview,
    'x-craft-live-preview': xCraftLivePreview,
    secret
  } = req.query


  if (typeof token !== 'string') {
    res.status(401).json({message: 'Token missing'})
    return
  }

  if (!req.query.uri) {
    res.status(401).json({message: 'Not allowed to access this route'})
    return
  }

  const previewParams = {
    siteId: siteId as string,
    uri: uri as string,
    token: token as string,
    secret: secret as string,
    'x-craft-preview': xCraftPreview as string,
    'x-craft-live-preview': xCraftLivePreview as string,
  }

  res.setPreviewData({
    ...previewParams
  })

  const isHome = uri === '__home__'
  const location = `/${isHome ? '' : uri}`

  // Redirect to the path from the fetched url
  res.writeHead(307, {Location: location})
  res.end()
}

export default Preview

But on my app/pages.tsx when I log this

const data = previewData();
console.log(data)

it's all the time false 🤔

But looks like the cookies are set:

OK...
Looks like it works... Don't know what was wrong ¯_(ツ)_/¯

[williamiommi]

oh nice :)
I don't know your specific case but are you losing the 'static' part right? I mean your page that checks for previewData is server side rendered (λ) at build time right?

fun fact: I just realized that you can search for preview data in the beta docs...but if you see the side navigation, the link is disabled 😄 like a few others.

so yeah maybe they are still working on the feature...we are in beta after all

[davidhellmann]

Good question (static).
I think I have to figure that out. Hope their are more guides about topics like this in the future.

[davidhellmann]

Yes, build works but dev is now broken :/

[csartor]

Yep i'm having this issue as well. Even though the headers are set properly, the render fails when I call const data = previewData();.

Using generateStaticParams as well. I've bypassed it by now as its just a local test and it works fine, and I'd imagine by the time we get this fixed I still won't be ready to deploy haha.

They updated something to do with generateStaticParams the other day on 13.0.3 but it didn't fix the issue.

[estubmo]

Somehow it works with both getStaticParams and previewData within this repo https://github.com/estubmo/nextjs-blog-cms-sanity-v3

File in question: https://github.com/estubmo/nextjs-blog-cms-sanity-v3/blob/main/app/posts/%5Bslug%5D/page.tsx

I have another repo where I pages and app, and the same embedded Sanity, but somehow it does not work there. I have no idea why.

[seanislegend]

I am also getting weird behaviour with this. I've followed the same setup per the documentation. The basic implementation is:

// ./src/pages/api/preview.ts
import {NextApiRequest, NextApiResponse} from 'next';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    res.setPreviewData({});
    res.writeHead(301, {Location: req.query?.return || '/'});
    res.end();
};

export default handler;

When I visit this URL (e.g. on local it's http://localhost:3000/api/preview?return=/about) I get redirected back to / with no console output or error. However the API route is not called (tested by adding a console log, and no cookie information saved).

Weirdly, if I close my dev client, delete the .next folder, and then run again, then visit the preview URL. I sometimes get an error that the module pages/_document could not be loaded.

Currently running 13.1.0.

[leerob]

Preview mode is not ready in the app/ directory yet, per the roadmap.

We will release more information as things are ready to use 🙏

[yn5]

I guess most of you following this know, but just in case (since I was looking at this thread on weekly basis in case Github would fail to send me an update on it as I was waiting for this feature 😉 ) .

Draft mode which replaces preview mode for the app directory has just been released in 13.4: https://nextjs.org/docs/app/building-your-application/configuring/draft-mode.

Beware of this little issue: #49237