Prismic Preview always opening the home page

Developing with Prismic
1

Prismic preview is not working properly, its always opening home page instead of actual preview route.
I'm using default preview file only, do I need to change anything ?

import { redirectToPreviewURL } from "@prismicio/next";
import { createClient } from "@/prismicio";

/**
 * @param {import("next/server").NextRequest} request
 */
export async function GET(request) {
  const client = createClient();

  await redirectToPreviewURL({ client, request });
}
2

Hey @webdev3,

Is your route resolver up to date with route objects for all of the routes on your website?

Sam

3

Sharing my prismicio.js, Is this enough or do I need to add this somewhere else

const routes = [
  {
    type: "solution_pages",
    path: "/solutions/:uid"
  },
  {
    type: "industry_pages",
    path: "/industries/:uid",
  },
  {
    type: "product_pages",
    path: "/products/:uid",
  },
  {
    type: "case_studies",
    path: "/resources/case-studies/:uid",
  },
  {
    type: "resources_hub_pages",
    path: "/resources/:uid",
  },
  {
    type: "landing_pages",
    path: "/lp/:uid",
  },
  {
    type: "page",
    path: "/:uid",
  },
  {
    type: "page",
    uid: "home",
    path: "/",
  },
  {
    type: "settings",
    path: "/",
  }
];

export const createClient = (config) => {
  const client = prismic.createClient(repositoryName, {
    routes,
    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
    fetchOptions:
      process.env.NODE_ENV === "production"
        ? { next: { tags: ["prismic"] }, cache: "force-cache" }
        : { next: { revalidate: 5 } },
    ...config,
  });

  prismicNext.enableAutoPreviews({ client });

  return client;
};
5

Hi @webdev3,

Based on the information available, I can't say for sure what the problem is. Try looking at our troubleshooting guide and let me know if that helps:

Sam

7

Hello friends,

I might be able to offer some help here based on having just fixed this myself.

After adding eslint to the project I "fixed" the error below by removing the await

image
image1360×592 76.4 KB

After adding it back and disabling the relevant rules with a comment the preview now works again on any page

import type { NextRequest } from "next/server";
import { draftMode } from "next/headers";
import { redirectToPreviewURL } from "@prismicio/next";
import { createClient } from "../../../prismicio";

export async function GET(request: NextRequest): Promise<never> {
  const client = createClient();

  draftMode().enable();
  /* eslint-disable-next-line no-return-await */
  return await redirectToPreviewURL({ client, request });
}

you could also do the below, since the return is unnecessary

export async function GET(request: NextRequest): Promise<void> {
  const client = createClient();

  draftMode().enable();
  await redirectToPreviewURL({ client, request });
}
1 Like