Comments (5)
Hey there @dnlmzw,
Thanks for the kind words, and definitely happy to provide more insight into how the "Live Preview" works!
The live preview is utilizing Next's built-in "Preview Mode" feature, which you can read about here: https://nextjs.org/docs/advanced-features/preview-mode
In short, it works like this:
- Use a custom
/api/preview
route that enables Preview Mode by setting cookies with:res.setPreviewData({})
- Send a page slug to this API endpoint (which sets the preview mode), and redirect to the page in question
- Now, the page will have
getStaticProps
called at request time (instead of at build time) because Preview Mode is on.
What this means, is we can now load our data in real-time, AND switch up what loads when this is the case.
In HULL, how we're doing this can be seen here: https://github.com/ndimatteo/HULL/blob/main/pages/%5B...slug%5D.js#L32-L36
You'll see we're passing in the preview
and previewData
props which allows us to incorporate preview mode in our data fetching. We send this as a second parameter to our data fetching function, as an object:
{
active: preview,
token: previewData?.token
}
With this, in our data fetching function, we can get the latest draft content to send back: https://github.com/ndimatteo/HULL/blob/main/lib/api.js#L367-L388
What's interesting about this, is our actual GROQ remains unchanged! Instead, how we grab the latest draft data is just in how we setup our Sanity Client. We pass that preview object along to our Sanity Client setup, which you can see here how it's utilized: https://github.com/ndimatteo/HULL/blob/main/lib/sanity.js#L23-L24
By turning off the useCdn
option and passing our token
we can now access draft data in our GROQ calls. If you check out the documentation around "drafts" here, you can see it says:
Drafts are not available to the public API, but can be accessed using an authenticated client or using an access token.
The last piece to the puzzle is where/how you actually initiate the "live preview" for a particular page/product/etc.
And that's where the custom Sanity Action comes to the rescue! I'm adding this custom action to the studio that when clicked opens a new tab at the API endpoint with the document slug, which in turn goes through steps 1-3 above. And finally, together with our updated data fetching, your page will display with the latest content from Sanity ✨
bonus: You're probably wondering how to "stop" previewing content. This is simply done by expiring the preview cookie after 20 seconds. So once you "preview" a page, your whole site will be in preview mode (meaning you can preview other pages as well!) for 20 seconds, and then refreshing after that you'll be back to seeing your currently live/deployed version.
I hope that helps, but let me know if anything needs clarified!
from hull.
Would it be possible to have a realtime preview mode in a separate pane in Sanity? Meaning if I'm editing the text of, say, the homepage hero, I would be able to see the live preview update as I'm typing? I believe I saw Kevin Green of midway do this in a YouTube video, but obviously that's Gatsby, not Next.
Something similar to this: https://www.sanity.io/blog/live-preview-with-nextjs
from hull.
Hey there @peepers-rick absolutely!
The implementation of this is fairly straightforward and HULL has done some of the legwork for this setup already. I'd suggest reviewing this to see how it's done: https://www.sanity.io/guides/nextjs-live-preview
from hull.
Thanks @ndimatteo !
I was able to get this working shortly after posting my comment. I just wanted to ensure I wasn't being redundant with the preview you already had baked in. Thanks so much for this repo, it's an absolutely fantastic starting point.
from hull.
@peepers-rick that's great to hear! And nope, not being redundant :)
Slightly different techniques that share the same Next.js preview
mode, so very useful to have both for different editing experiences.
Glad you're enjoying the repo! 🤘
from hull.
Related Issues (20)
- Is it true that you have to redeploy every time a product is added? HOT 4
- Sanity CLI v3 causes project to not work correctly HOT 1
- GBP Cart Subtotals
- Sanity not connecting to Storefront HOT 2
- Products not appearing in Sanity—how to bring them over? HOT 1
- Bundles created with the Shopify App (Summer 2023) can't be added to cart HOT 11
- Mobile Crashes When Interacting On Page HOT 6
- marketing starter upgrade packages HOT 1
- Client-side exception HOT 7
- unknown field found
- Sync seems inconsistent HOT 1
- Can't locate Sanity Starter HOT 1
- Not able to Import Shopify Products into sanity Studio
- Application error: a client-side exception has occurred (see the browser console for more information). HOT 2
- Issue cloning project from Vercel HOT 1
- TypeError: Cannot read properties of undefined (reading 'replace') HOT 2
- I got the same error after following the directions. I cloned the repository with git clonee and followed the instructions in the ReadMe.md file in the root. Localhost:3333 and localhost:3000 are running, I don't see any errors. HOT 2
- Tried deploying Hull from Vercel Interface. HOT 1
- Sanity Create Project is not working HOT 1
- @reach/rect error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hull.