Discussion about resolving an issue with preview mode not logging out properly and causing errors.

to load resource: the server responded with a status of 404 ()
26488-4e81157118c9fc11.js:1 Error: Unable to load preview as you're not logged in
    at onPublicAccessOnly (9151-fc58c70d1eec9468.js:1:10281)
    at 9151-fc58c70d1eec9468.js:1:12816
    at s.default (9151-fc58c70d1eec9468.js:1:9360)
    at rs (bce60fc1-d12f33ec043fc570.js:9:38883)
    at lg (bce60fc1-d12f33ec043fc570.js:9:54283)
    at iv (bce60fc1-d12f33ec043fc570.js:9:112451)
    at oR (bce60fc1-d12f33ec043fc570.js:9:90087)
    at bce60fc1-d12f33ec043fc570.js:9:89936
    at oD (bce60fc1-d12f33ec043fc570.js:9:89943)
    at ow (bce60fc1-d12f33ec043fc570.js:9:87645)
window.console.error @ 6488-4e81157118c9fc11.js:1
<http://sociaaladvocatenrotterdam.vercel.app/:1|sociaaladvocatenrotterdam.vercel.app/:1>     Failed 

sanity.preview.ts:

"use client"

import { definePreview } from "next-sanity/preview"
import type { UsePreview } from "next-sanity/preview"
import { config } from "./sanity.client"

const onPublicAccessOnly = () => {
  throw new Error(`Unable to load preview as you're not logged in`)
}

export const usePreview: UsePreview = definePreview({
  projectId: config.projectId,
  dataset: config.dataset,
  onPublicAccessOnly
})

page.tsx:

import { draftMode } from "next/headers"
import { notFound } from "next/navigation"

import { getPage, getPageMeta } from "@/lib/sanity/sanity.helpers"

import { PageLayout } from "@/components/layout"
import { ExitPreviewMode, MetaData } from "@/components/shared"
import { PagePreview, PreviewSuspense } from "@/components/previews"

import { pageQuery } from "@/lib/queries"

export const generateMetadata = async () => {
  const page = await getPageMeta("frontpage")

  return MetaData({ page })
}

export const revalidate = 60 // revalidate this page every 60 seconds

const HomePage = async () => {
  const { isEnabled } = draftMode()

  const page = await getPage("frontpage")

  if (!page) {
    notFound()
  }

  if (isEnabled) {
    return (
      <PreviewSuspense fallback={<PageLayout page={page} />}>
        <PagePreview query={pageQuery} variables={{ slug: "frontpage" }} />
        <ExitPreviewMode />
      </PreviewSuspense>
    )
  }

  return <PageLayout page={page} />
}

export default HomePage

import { definePreview } from "next-sanity/preview"
import type { UsePreview } from "next-sanity/preview"
import { config } from "./sanity.client"

const exitPreviewMode = async () => {
  const exitPreviewUrl = "/api/exit-preview"

  try {
    const response = await fetch(exitPreviewUrl)

    if (response.ok) {
      console.log("Exited preview mode successfully.")
    } else {
      console.error("Failed to exit preview mode:", response.statusText)
    }
  } catch (error) {
    console.error("Failed to exit preview mode:", error)
  }
}

const onPublicAccessOnly = () => {
  exitPreviewMode()
}

export const usePreview: UsePreview = definePreview({
  projectId: config.projectId,
  dataset: config.dataset,
  onPublicAccessOnly
})

import { definePreview } from "next-sanity/preview";
import type { UsePreview } from "next-sanity/preview";
import { config } from "./sanity.client";

const exitPreviewMode = async () => {
  const exitPreviewUrl = "/api/exit-preview";

  try {
    const response = await fetch(exitPreviewUrl);

    if (response.ok) {
      console.log("Exited preview mode successfully.");
      location.reload(); // Refresh the page
    } else {
      console.error("Failed to exit preview mode:", response.statusText);
    }
  } catch (error) {
    console.error("Failed to exit preview mode:", error);
  }
};

const onPublicAccessOnly = () => {
  exitPreviewMode();
};

export const usePreview: UsePreview = definePreview({
  projectId: config.projectId,
  dataset: config.dataset,
  onPublicAccessOnly,
});