I'm trying to get 'Preview' capability to work in our dev region. I believe that I have everything setup properly, but the preview is showing the published content. I have followed documentation for setup and a few troubleshooting posts but have not been able to figure out what I'm missing.
- Set to my prismic stage region.
Prismic UI Setup:
sm.json
{
"_latest": "0.3.1",
"apiEndpoint": "https:///api/v2",
"libraries": ["@/slices"]
}
pages/_app.js
<PrismicProvider
linkResolver={linkResolver}
internalLinkComponent={({ href, children, ...props }) => (
<a {...props}>{children}
)}
>
<Component {...pageProps} />
pages/api/preview.js
import { linkResolver, createClient } from "../../prismicio";
import { setPreviewData, redirectToPreviewURL } from "@prismicio/next";
export default async (req, res) => {
console.log(req);
const client = createClient({ req });
await setPreviewData({ req, res });
await redirectToPreviewURL({ req, res, client, linkResolver });
};
prismicio.js
import * as prismic from "@prismicio/client";
import { enableAutoPreviews } from "@prismicio/next";
import sm from "./sm.json";
export const endpoint = sm.apiEndpoint;
export const repositoryName = prismic.getRepositoryName(endpoint);
// Update the Link Resolver to match your project's route structure
export function linkResolver(doc) {
console.log(doc.type);
console.log(doc.uid);
switch (doc.type) {
case "homepage":
return "/";
case "page":
return /${doc.uid};
case "simple_page":
return /${doc.uid};
default:
return null;
}
}
// This factory function allows smooth preview setup
export function createClient(config) {
const client = prismic.createClient(endpoint, {
...config,
});
enableAutoPreviews({
client,
context: config.previewData,
req: config.req,
});
return client;
}
pages/[slug].js
export async function getStaticPaths({ previewData }) {
const client = createClient({ previewData });
const documents = (await client.getAllByType("simple_page")) || null;
return {
paths: documents.map((doc) => prismicH.asLink(doc, linkResolver)),
fallback: true,
};
}
export async function getStaticProps({ params, previewData }) {
console.log(previewData);
const client = createClient({ previewData });
const simplePages = (await client.getAllByType("simple_page")) || null;
const simplePage = simplePages.find(
(simiplePage) => simiplePage.uid === params.slug
);
console.log(simplePage.data.title[0].text);
return {
props: {
simplePage: simplePage,
},
};
}