Previews on Netlify with NextJS

I have followed all of the steps here to the letter: Previews with Next.js - Prismic and cannot get the preview to work on local development or on the remove development environment. The troubleshooting sticky thread seems a little outdated, and honestly I'm completely stuck on how to troubleshoot further. I am using NextJS. Any help would be massively appreciated.

Mini update: I was able to get the previews to start working on localhost, but they still do not work on the server. I see now when I try to go to /api/exit-preview on the server, it shows a 404 in the console. When I try the same on localhost:3000/api/exit-preview, the preview is exited as expected. Is there something I'm missing on deploy? I'm deploying to Netlify with the build command:
npx next build && npx next export and out as my publish directory. Everything else seems to be working fine with this setup - content shows, hooks trigger, etc.

Another update: I found this thread from a while ago - Preview not working on netlify - #4 by fprovost where it looks like the api directory isn't supported by Netlify, which would explain my 404. But how do you convert the preview code to a Netlify function? This seems like something that should definitely be in Prismic's NextJS/Netlify deployment documentation steps. Again, help is appreciated here.

Hi Ashley,

Thank you so much for pointing this out, it seems Next Previews are now support on Netlify with a little extra configuration:

You're totally right this is something we should have included in our NextJS/Netlify deployment documentation steps and I'm going to add that now.

Try this out and let me know how it goes.


I got some build errors using the next-on-netlify plugin. Googling them, looks like I wasn't the only one, which lead me to an updated version of the article here: Announcing one-click install Next.js Build Plugin on Netlify | Netlify

Even following those steps, it build successfully, but I get the unexpected error, i.e. 404 for the api/preview and exit-preview routes. Out of desperation last night and to validate that it's a Netlify issue, I deployed the site to Vercel and it works fine. Something is still buggy with the Netlify configuration documentation to get preview to work. Sort of heartbreaking because I have really liked Netlify and had no issues with it until now.

Dang, that's frustrating.

Even worse they deprecated that package I sent you :cry:

What they are recommending now is this one:

Well until these 2 play better together I'll remove Neltify from the Next.js deployment page.

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