Previews on Netlify with NextJS

asummers · June 22, 2021, 3:27pm

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.

Phil · June 24, 2021, 10:40am

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.

Thanks.

asummers · June 24, 2021, 2:35pm

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.

Phil · June 24, 2021, 3:20pm

Dang, that's frustrating.

Even worse they deprecated that package I sent you

github.com/netlify/next-on-netlify

* deprecating next-on-netlify * (info & feedback)

opened 02:59AM - 05 Mar 21 UTC

lindsaylevine

discussion

beloved NoN users! it's been a pleasure serving you here on this repo, born and …raised by friend and inspiration @FinnWoelm, but it's time to deprecate `next-on-netlify` in favor of its successor, the [Essential Next.js plugin](https://github.com/netlify/netlify-plugin-nextjs) - built and supported by the same people who have been maintaining NoN. this issue will be the primary place for NoN users to ask questions and give feedback about us deprecating `next-on-netlify` and moving to the plugin. we know there are NoN users who prefer the standard manual NoN setup, and we're committed to making sure the plugin experience suits your needs as well. ## testing the plugin with next-on-netlify embedded right now, we have a [canary release](https://www.npmjs.com/package/@netlify/plugin-nextjs/v/3.0.0-canary.2) of the plugin that merges `next-on-netlify` into its source. that said, all of the internals of NoN will live on, just inside the plugin :). please feel free to test out the canary release by installing the plugin via `npm i @netlify/plugin-nextjs@canary` and adding it to your `netlify.toml` file like so: ``` [[plugins]] package = "@netlify/plugin-nextjs" ``` ⚠️ to enable the plugin to actually run, you will need to uninstall NoN and remove the NoN postbuild script. ## next steps we plan to release the new plugin, with `next-on-netlify` merged in, at or around the same time that we start automatically installing the plugin for next.js sites on netlify. this is also when the new plugin name (essential next.js plugin) will become more widely known/used, and this is when we will formally deprecate `next-on-netlify` and archive this repo. at that time, we will transfer open NoN issues to the plugin repo. --- please let us know how we can best support you moving over to the plugin!

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.

system · July 7, 2021, 10:54am

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

Topic		Replies	Views
Preview not working on netlify Developing with Prismic nextjs	18	2808	December 13, 2021
Preview works in localhost, but not in production (Next.js) Developing with Prismic nextjs	3	1541	December 9, 2021
Next.js API routes Docker Developing with Prismic nextjs	2	1574	February 14, 2022
Prismic+Next.js Netlify deploy Developing with Prismic nextjs	1	489	July 13, 2022
Prismic content updates not publishing on Netlify with Nextjs 13.4.6 app router Developing with Prismic nextjs	6	990	March 14, 2024

Previews on Netlify with NextJS

Related topics