How can we use useIsPreviewing inside getStaticProps next js

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.