Expired Ref with Next.js App Router

Developing with Prismic
1

I am encountering an issue with my Next.js application integrated with Prismic. The error message I’m receiving is:

"The provided ref is no longer accessible, it has expired. Master ref is: XXX"

Details:

  • Framework: Next.js with the App Router (/app directory)
  • Prismic Integration: Using @prismicio/client and @prismicio/next

What I’ve Implemented:

  1. Revalidation Route:
  2. I added a revalidation route at src/app/api/revalidate/route.ts:
import { revalidateTag } from 'next/cache';
import { NextResponse } from 'next/server';

export async function POST() {
  revalidateTag('prismic');
  return NextResponse.json({ revalidated: true, now: Date.now() });
}

2. Webhook Configuration in Prismic:

  • Name of the Webhook: Next.js on-demand revalidation
  • URL: [My app's deployed URL]/api/revalidate (e.g., https://example.com/api/revalidate)
  • Triggers: “A document is published” and “A document is unpublished” are checked.
  1. Revalidation Setting in Next.js:
  2. In my Next.js pages, I added:

export const revalidate = 60;

Prismic client

export const createClient = (config: prismicNext.CreateClientConfig = {}) => {
  const client = prismic.createClient(sm.apiEndpoint || repositoryName, {
    accessToken: process.env.NEXT_PUBLIC_PRISMIC_TOKEN,
    routes,
    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;
};

Issue Description:
Despite the above configurations, I'm still receiving the expired ref error when attempting to fetch content from Prismic after publishing new documents.

Package.json

{
  "name": "nextjs-starter-prismic-minimal-ts",
  "version": "0.1.0",
  "private": true,
  "license": "Apache-2.0",
  "author": "Prismic <contact@prismic.io> (https://prismic.io)",
  "scripts": {
    "dev": "concurrently \"npm:next:dev\" \"npm:slicemachine\" --names \"next,slicemachine\" --prefix-colors blue,magenta",
    "next:dev": "next dev",
    "build": "rm -rf .next/cache/fetch-cache && next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "PORT=8001 start-slicemachine",
    "format": "prettier --write .",
    "codegen": "npx prismic-ts-codegen",
    "postbuild": "next-sitemap --config next-sitemap.config.mjs"
  },
  "dependencies": {
    "@next/third-parties": "^14.2.5",
    "@prismicio/client": "^7.5.0",
    "@prismicio/next": "^1.6.0",
    "@prismicio/react": "^2.8.0",
    "@sentry/nextjs": "^8",
    "algoliasearch": "^4.24.0",
    "classnames": "^2.5.1",
    "cookie": "^0.6.0",
    "cross-fetch": "^4.0.0",
    "dotenv": "^16.4.5",
    "gsap": "^3.12.5",
    "keen-slider": "^6.8.6",
    "lottie-react": "^2.4.0",
    "next": "^14.2.13",
    "next-sitemap": "^4.2.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropdown": "^1.11.0",
    "react-fast-marquee": "^1.6.5",
    "react-ga": "^3.3.1",
    "react-h5-audio-player": "^3.9.3",
    "react-highlight": "^0.15.0",
    "react-instantsearch": "^7.12.2",
    "react-instantsearch-nextjs": "^0.3.7",
    "react-player": "^2.16.0",
    "react-scroll": "^1.9.0",
    "react-sticky-el": "^2.1.0",
    "react-transition-group": "^4.4.5",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^14.2.14",
    "@prismicio/types": "^0.2.9",
    "@slicemachine/adapter-next": "^0.3.56",
    "@svgr/webpack": "^8.1.0",
    "@types/cookie": "^0.6.0",
    "@types/node": "^20.11.27",
    "@types/node-sass": "^4.11.7",
    "@types/react": "^18.2.65",
    "@types/react-dom": "^18.2.22",
    "@types/react-highlight": "^0.12.8",
    "@types/react-scroll": "^1.8.10",
    "@types/react-transition-group": "^4.4.10",
    "concurrently": "^8.2.2",
    "eslint": "^8",
    "eslint-config-next": "^14.1.3",
    "prismic-ts-codegen": "^0.1.21",
    "sass": "^1.77.6",
    "slice-machine-ui": "^2.10.2",
    "typescript": "^5.4.2"
  }
}
2

Hey,
I had this issue before, what version of Next.js are you on?

Possible solutions:

3

hi @dmakos thanks for the quick response. Updated my post with package.json. We are using next:14.2.13

Using Netlify for hosting.

4

Hmm that should not be happening anymore on your version.

Try setting up access token (see linked topics in my previous post) as well as updating it to latest 14.2.17

I did both and so far I haven't had the issue. Or I haven't noticed :sweat_smile: I'm hosted on Vercel and actually thought it's Vercel issue...

5

We are already using the access token as well. Might give Next 15 a chance too. Do you know if Prismic officially supports it now?

Seems like a consistent error with Netlify and Vercel.

Thanks for your help! I'll update this post with more information after further testing.

6

Yeah, I'm not happy to hear that this is still happening to some other users! And also on Netlify - looks like it's actually an issue on Prismic side and it's still occurring for some.

I've seen it is supporting it now. But... 15 has some breaking changes to caching as far as I am aware plus it's using unstable react 19 - do research before making an upgrade and use at your own risk in production :wink:

1 Like