How can we use useIsPreviewing inside getStaticProps next js

Technical Questions
1

How can we use useIsPreviewing inside getStaticProps next js?

2

Hi Olivela!

Can you try to update react version to 2.0.0 and then see if useIsPreviewing works?

3

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

4

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?

5

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.