Good afternoon. I'm unable to get the Preview function to work with NextJs. I've created a basic app via npx create-next-app@latest I then ran the npx @slicemachine/init@latest. I followed all instructions as per this url -> https://prismic.io/docs/setup-nextjs. However when attempting to preview a draft document, I can see that /api/preview is triggered, and then it redirects to the correct route, I can see the toolbar installed. However the draft content is not displaying. I'm getting either the previous published version or document not found in the case of a unpublished draft document.
slicemachine.config.json looks as follows;
{
"repositoryName": "myrise",
"adapter": "@slicemachine/adapter-next",
"libraries": ["./src/slices"],
"localSliceSimulatorURL": "http://localhost:3000/slice-simulator"
}
prismicio.ts as follows
import * as prismic from "@prismicio/client";
import * as prismicNext from "@prismicio/next";
import config from "../slicemachine.config.json";
/**
* The project's Prismic repository name.
*/
export const repositoryName = config.repositoryName;
/**
* A list of Route Resolver objects that define how a document's `url` field is resolved.
*
* {@link https://prismic.io/docs/route-resolver#route-resolver}
*/
// TODO: Update the routes array to match your project's route structure.
const routes: prismic.ClientConfig["routes"] = [
{
type: "blog-posts",
path: "/stories/:uid"
}
];
/**
* Creates a Prismic client for the project's repository. The client is used to
* query content from the Prismic API.
*
* @param config - Configuration for the Prismic client.
*/
export const createClient = (config: prismicNext.CreateClientConfig = {}) => {
const client = prismic.createClient(repositoryName, {
routes,
accessToken: "....", removed for security but the correct token is present.
fetchOptions:
process.env.NODE_ENV === "production"
? { next: { tags: ["prismic"] }, cache: "force-cache" }
: { next: { revalidate: 5 } },
...config,
});
prismicNext.enableAutoPreviews({
client,
previewData: config.previewData,
req: config.req,
});
return client;
};
layout.tsx as follows
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>
{children}
<PrismicPreview repositoryName={repositoryName} />
</body>
</html>
)
}
api/preview/route.ts as follows
import { NextRequest } from "next/server";
import { redirectToPreviewURL } from "@prismicio/next";
import { createClient } from "@/prismicio";
import {draftMode} from "next/headers";
export async function GET(request: NextRequest) {
const client = createClient();
await redirectToPreviewURL({ client, request });
}
/stories/[uid]/page.tsx as follows;
import { createClient } from "@/prismicio";
export default async function Page({ params }: { params: { uid: string }}) {
const client = createClient();
const page = await client.getByUID("blog-posts", params.uid);
return <div>{JSON.stringify(page)}</div>;
}
I can confirm that a cookie is being set io.prismic.preview with a ref that I can use via a graphql query to verify the document.
package.json as follows;
{
"name": "app-test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"slicemachine": "start-slicemachine"
},
"dependencies": {
"@prismicio/client": "^7.2.0",
"@prismicio/next": "^1.3.4",
"@prismicio/react": "^2.7.2",
"@types/node": "20.6.0",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.7",
"autoprefixer": "10.4.15",
"eslint": "8.49.0",
"eslint-config-next": "13.4.19",
"next": "13.4.19",
"postcss": "8.4.29",
"react": "18.2.0",
"react-dom": "18.2.0",
"tailwindcss": "3.3.3",
"typescript": "5.2.2"
},
"devDependencies": {
"@slicemachine/adapter-next": "^0.3.14",
"slice-machine-ui": "^1.12.0"
}
}
Any assistance would be appreciated, however this is the most basic of setup and it does not appear to be working.
