Slices preview showing "Error" after a Next 14 -> 16 upgrade

Developing with Prismic
,
1

Describe your question/issue in detail

Hello everyone,

I upgraded the front-end dependencies on my website:

  • Node 18 -> Node 24
  • Next 14.js -> Next.js 16
  • React 18 -> React 19
  • next-international -> next-intl

It took a long time, but the site seems to be working fine with a few exceptions:
The Slices preview is marked as “Error” on the staging environment, but we also see it as an error on the production environment.

However, we only deployed to the staging environment, which is on a different server from the production environment.

I've looked everywhere. The APIs seem to be working fine, our webhooks are working, the API explorer is working, the GraphQL API is working.

I don't know what else to do or where else to look. Does anyone have any ideas?

https://jam.dev/c/0cfd1114-515b-4324-983f-874b7455ad65

Impacted feature

Slices preview

What steps have you taken to resolve this issue already?

Tested all API routes, tried to add some conditions on my proxy.ts file

Errors

Your Role

Front-end developer

Hosting provider

Cyllene. The app is running with pm2

Package.json file

{
  "dependencies": {
    "@didomi/react": "^1.8.8",
    "@hookform/resolvers": "^5.2.2",
    "@prismicio/client": "^7.21.6",
    "@prismicio/next": "^2.2.1",
    "@prismicio/react": "^3.3.0",
    "@react-email/components": "^1.0.7",
    "algoliasearch": "^5.48.1",
    "autoprefixer": "^10.4.24",
    "axios": "^1.13.5",
    "gsap": "^3.14.2",
    "leaflet": "^1.9.4",
    "leaflet.markercluster": "^1.5.3",
    "nanoid": "^5.1.6",
    "next": "^16.1.6",
    "next-connect": "^1.0.0",
    "next-intl": "^4.8.3",
    "postcss": "^8.5.6",
    "react": "^19.2.4",
    "react-calendar": "^6.0.0",
    "react-dom": "^19.2.4",
    "react-email": "^5.2.8",
    "react-google-recaptcha": "^3.1.0",
    "react-hook-form": "^7.71.1",
    "react-instantsearch": "^7.23.2",
    "react-leaflet": "^5.0.0",
    "react-leaflet-cluster": "^4.0.0",
    "react-schemaorg": "^2.0.0",
    "schema-dts": "^1.1.5",
    "server-only": "^0.0.1",
    "sharp": "^0.34.5",
    "swiper": "^12.1.1",
    "yup": "^1.7.1"
  },
  "devDependencies": {
    "@slicemachine/adapter-next": "^0.3.95",
    "@tailwindcss/forms": "^0.5.11",
    "@types/leaflet": "^1.9.21",
    "@types/leaflet.markercluster": "^1.5.6",
    "@types/node": "^25.2.3",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@types/react-google-recaptcha": "^2.1.9",
    "env-cmd": "^11.0.0",
    "eslint": "^9",
    "eslint-config-next": "^16.1.6",
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-unicorn": "^63.0.0",
    "husky": "^9.1.7",
    "lint-staged": "^16.2.7",
    "prettier": "^3.8.1",
    "prettier-plugin-tailwindcss": "^0.7.2",
    "pretty-quick": "^4.2.2",
    "slice-machine-ui": "^2.21.1",
    "tailwindcss": "^3.4.19",
    "typescript": "^5.9.3"
  },
  "overrides": {
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3"
  }
}

Steps to reproduce

I don’t really know :/

2

I’ve created a new prismic repo and a new project with a fresh Next.js start, setup everything and the slice preview is Error too.

I’m I missing something?

9bb31b5d-e29b-4d6e-b724-ea0f1bb744c2
9bb31b5d-e29b-4d6e-b724-ea0f1bb744c21000×510 75.3 KB

3

Hey Kevin, since your APIs, webhooks, and live site are all working, this likely isn’t a Prismic data issue but something specific to the Slice preview environment after the Next 16 / React 19 upgrade.

From what you’re describing, this kind of “Error” in the Slices preview is usually caused by something failing in the browser (often visible in the console), rather than a backend issue.

Could you open your browser dev tools while on the Slice preview and share a screenshot of the Console tab when the error appears? That will help us see whether it’s an auth issue, a runtime error, or something else triggered by the upgrade.

4

Hey Pau and thanks for the reply. I didn't have anything in the console or in the network tab, which is why I was surprised.

My problem actually came from my middleware with next-intl.

For some reason, in the old middleware of the site, the /slice-simulator route was not filtered and it worked fine (I still don’t understand why).

With the upgrade to Next.js 16 and the switch to next-intl, I had to exclude the route manually in my proxy.ts file.

As for the production error, I realized (far too late) that the route to Slice Preview had been changed, so it couldn't work anymore. It was most likely a mistake on someone's part.

Everything is working well now. The upgrade wasn't easy, but in the end, it went pretty well :slight_smile:

1 Like