If you're experiencing issues with Prismic's Live Preview, including in a Next.js environment, use the following troubleshooting guide to identify and resolve the problem.
1. Verify slicemachine.config.json
Configuration
Ensure your slicemachine.config.json
file is correctly set up:
{
"repositoryName": "your-repo-name",
"adapter": "@slicemachine/adapter-next",
"libraries": ["./slices"],
"localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}
- Adapter: Should be set to
@slicemachine/adapter-next
. - Libraries: Should correctly point to the slices directory.
- Local Slice Simulator URL: Must match your development environment URL.
2. Configure the Slice Simulator Page
Ensure you have a slice-simulator.js
(or .ts
) page inside the pages
directory:
import { SliceSimulator } from '@slicemachine/adapter-next/simulator';
import { SliceZone } from '@prismicio/react';
import { components } from '../slices';
const SliceSimulatorPage = () => (
<SliceSimulator sliceZone={(props) => <SliceZone {...props} components={components} />} />
);
export default SliceSimulatorPage;
3. Match Live Preview URLs
Ensure consistency between localSliceSimulatorURL
in slicemachine.config.json
and the Live Preview URL configured in Prismic. Both should point to the same address, typically http://localhost:3000/slice-simulator
during development.
4. Clear Browser Cache and Cookies
If Live Preview isn't updating correctly, try:
- Clearing the browser cache to remove outdated data.
- Deleting cookies related to Prismic to reset session data.
5. Manage Preview Cookies
Preview cookies can interfere with Slice Previews. To reset:
- Click the Preview button in Prismic.
- Close the preview toolbar ("X").
- Refresh the Page Builder.
6. Ensure the Slice Simulator is Accessible
Test if your simulator is reachable:
- Open
http://localhost:3000/slice-simulator
directly. - If it doesn't load, check for redirect loops (
net::ERR_TOO_MANY_REDIRECTS
).
7. Validate JSON Formatting
Misformatted JSON files can break configurations. Ensure:
- No trailing commas.
- Double quotes (
"
) instead of single quotes ('
). - Correct syntax in
slicemachine.config.json
.
8. Adjust Browser Cookie Settings
In some cases, blocking third-party cookies in browser settings has resolved preview issues. Try toggling this setting.
9. Synchronize Dependencies
Ensure all Prismic-related packages are up-to-date and compatible:
npm outdated
npm update
This prevents inconsistencies that can cause Live Preview issues.
10. Check Security Headers
If hosting your application, security headers might block embedding:
X-Frame-Options
should beSAMEORIGIN
or removed during development.- Check
Content-Security-Policy
to allowframe-src
fromlocalhost
.
By following these steps, you should be able to resolve most Live Preview issues in Next.js when working with Prismic.