Next.js Deployed on Vercel Now - Dynamic Links Return 'An Unexpected Error has Occurred'

Based on your description, you're encountering an "unexpected error" with dynamic links after deploying your Next.js app with Sanity to Vercel. This is almost certainly due to a breaking change in Next.js 15 regarding dynamic route parameters.

The Problem

In Next.js 15, the params prop in dynamic route pages is now a Promise instead of a plain object. If you're accessing params.slug (or any param) directly without awaiting it, your page will crash in production.

The Solution

You need to await the params before accessing any properties. Here's how to fix it:

❌ Old way (causes error):

export default function Page({ params }: { params: { slug: string } }) {
  const { slug } = params; // This breaks in Next.js 15
  // ...
}

✅ New way (correct):

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params; // Await the params first
  // ...
}

Complete Working Example

Here's a full example with Sanity data fetching:

import { defineQuery } from "next-sanity";
import { client } from "@/sanity/client";

const query = defineQuery(
  `*[_type == "page" && slug.current == $slug][0]{title, content}`
);

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  const data = await client.fetch(query, { slug });

  return (
    <div>
      <h1>{data.title}</h1>
      <div>{data.content}</div>
    </div>
  );
}

What Changed:

1. Component is now async - Added async keyword
2. Type updated - params is typed as Promise<{ slug: string }>
3. Params are awaited - const { slug } = await params;

This applies to all dynamic routes in your app:

• [slug]/page.tsx
• [id]/page.tsx
• [category]/[slug]/page.tsx
• Any route with brackets []

After updating your dynamic route files with these changes, redeploy to Vercel and your pages should work correctly. This is documented in the Next.js App Router guide where it notes that Next.js 15 requires awaiting route params.