I've been trying to get preview with NextJS working over the last day, and while I have seen Kenn's lovely post about how to get the NextJS side working, I can't for the life of me find anything about how to turn the "Save and Preview" button into something I can use that automatically opens the site and triggers the NextJS preview api. I tried searching for "preview" in the docs but it only produces the article about using ContentSendingNotification, which doesn't work in 14/15 anyway. Am I missing something or are we missing documentation somewhere? (In which case sounds like I need to write it up as a blog post once I've got it working 😁 )

Is this what you need https://docs.umbraco.com/umbraco-cms/reference/content-delivery-api/additional-preview-environments-support

Yeah, that's the article I found. But it doesn't work in 14/15 with bellissima (https://github.com/umbraco/Umbraco-CMS/issues/17035)

Not tried yet with 14+ but I do have NextJS block previews working

We created something custom for this. The additional environments were too limited, especially because you want the preview to only work on a backoffice user that is logged in.

Ah fair enough. I haven't tried it myself but I will be looking into it soon. Interested to hear how you get on or if you find a workaround/fix!

I found it a bit too complex for what it's trying to solve to be honest, but I can give you an overview of the flow. We don't want just anyone to add like an additional querystring parameter and be able to see the unpublished content. So this is the flow: - When Someone in the backoffice presses the preview button, a custom controller hijacks the route. - A JWT token is created containing the username/email of the user who initiated the preview - The frontend (on our case a React app) is then called with that token as a querystring parameter - The frontend validates the token through a custom endpoint - If it's valid, the frontend page will be shown with the unpublished data (preview) - Otherwise it will just show the normal published content This is Umbraco 13 though, so not sure if that works in Umbraco 14+. Gonna find out soon 🙂

Thanks all. Just working through it myself. Sounds like I definately need to make a blog post to describe it all once I'm done!

Doing very similar thing to Luuk using headers instead, for block previews

Ok! Got it. Here's what I've discovered (which I'll write up as a blog post - but maybe not until after Christmas): In Umbraco 14 the "Save & Preview" button does the following: - Saves the content - Calls a special API to start preview mode for the current user and setup a SignalR hub (for realtime updates) - Opens the backoffice preview url in a new window (Note: no way to configure the backoffice preview url at the moment) The backoffice preview url is a backoffice route that loads the web component, which sets up a banner at the bottom and loads the front-end preview route in an iframe. (Note: no way of configuring a different front-end preview url at the moment) The frontend preview url is (/{id}?culture=XXX) where Id is the content node Guid. In MVC world that is picked up by Umbraco and rendered as normal, but using the preview content rather than the published content. If you are headless this gives a lovely 404 and everything stops. To make this work, I've added a RenderController for that specific route only that checks for the context.IsPreview flag. It looks up the content from the Id and works out the path, then does a redirect to the NextJS preview api url including: - the path - an expiry time (5 mins out) - an SHA256 HMAC of the timestamp and the path using a shared secret as the key NextJS preview api route checks the signature matches and then turns on preview mode (now called Draft mode - https://nextjs.org/docs/app/building-your-application/configuring/draft-mode) using a cookie for the front-end domain, and then redirects you to the appropriate page. Once on the page, NextJS has a lovely context.preview / content.draftMode flag which you pass straight into the Umbraco content delivery api and hey presto you got draft content.

We're about to update all our Umbraco packages to Umbraco 15 (from 13) in january. These are the things that are very nice to know! We're also using NextJS, so I intend to look into the preview api as well 🙂 Thanks!

Hi @Andrew McKaskill , I had the same need some years ago and I created a package to let your configure the preview button, to some degree is does the same as the Additional preview environment, but you dont have to build it your self. Maybe that can help you. Note - for now it only supports Umbraco v9-13 but I'm working on an update to support v14 plus: https://marketplace.umbraco.com/package/our.umbraco.headlesspreview