Howdy Prismic Community!
I’ve just been stuck for a while on an somewhat opaque error while setting up the Slice Simulator on a Next.js app which had the X-Frame-Options: SAMEORIGIN header configured for all routes, a common security measure for certain apps to prevent unauthorised embedding and clickjacking.
Attempts to load a slice preview were simply timing out with no apparent error logged on the server or console
After understanding how Slice Machine communicates with the Next.js app to render slices through iframes, it makes perfect sense why this wasn’t working, but I nonetheless wanted to share the resolution in case someone else gets stuck on this issue. 
The solution was quite simple, I just had to modify next.config.ts to make an exception for the /slice-simulator path in the headers config:
{
// Exclude /slice-simulator so it can be embedded in Prismic's Slice Machine iframe
source: "/((?!slice-simulator).*)",
headers: [
{
key: "X-Frame-Options",
value: "SAMEORIGIN",
},
],
},
Suggestion:
- Update “Troubleshooting” section on What Is Slice Machine? — Prismic Docs to clearly indicate that the app that hosts the Slice Simulator needs to allow the embedding of iframes for
/slice-simulator
