How can we use useIsPreviewing inside getStaticProps next js?
Hi Olivela!
Can you try to update react version to 2.0.0 and then see if useIsPreviewing works?
getStaticProps
in next.js is a function that gets called at build time, while the previewing or editing in builder is a check at run time, and specifically the useIsPreviewing
is a react hook that can only be used inside a react component or another react hook.
For a reference implementation on using Builder with next.js, please check this example builder/[[...page]].tsx at main · BuilderIO/builder · GitHub
The example you give works well (shows the 404 page), except it returns a 200 http status. The only way I found to return a 404 status in the getStaticPageProps
, but then there is no way to check useIsPreviewing
.
(Found no working solution in here either: Way to return 404 http error code in render() · Issue #4452 · vercel/next.js (github.com))
Do you have a suggestion on how to handle this?
I think I found a workaround: in your error component (404.tsx
), add the usePreviewing()
hook, and if it is in preview mode, show the BuilderComponent block inside the 404-page. The server will return a 404 status, but the front-end will render the Builder stuff. It seems to be working.