Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to fix Next.js 15 dynamic route prerender error

I have a dynamic route without use cache narrative.

// /search/[query]/page.tsx 
import { Suspense } from "react";

import SearchQuery from "@/components/Search/Query";
import { Skeleton } from "@/components/ui/skeleton";

export default async function SearchPage({
    params,
}: {
    params: Promise<{ query: string }>;
}) {
    const queries = params.then(param => param.query);

    return (
        <Suspense fallback={<Skeleton className="h-[140px] w-full" />}>
            {/* @ts-expect-error Async Server Component */}
            <SearchQuery queries={queries} />
        </Suspense>
    );
}

When I try to build my project, I got a prerender error:
Route "/search/[query]": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspense

I have already tried using use cache, same result.

Crazy thing is, when I try the official example from Next.js docs, it still throws same error.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>Blog Post: {slug}</h1>
}

This code threw same error.

This is my next.config.mjs:

import path from "path";

const __dirname = path.resolve();

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        reactCompiler: true,
        dynamicIO: true,
    },
    sassOptions: {
        includePaths: [path.join(__dirname, "components")],
        prependData: `@use "@/assets/mixins" as *;`,
    },
    transpilePackages: ["@web3-name-sdk/core"],
};

export default nextConfig;

My Next version is ^15.1.1-canary.7.

Tags:

2

Answers


  1. 0

    I had the same error and was able to fix encapsulating the page with Suspense:

    export default async function Page({ params }: { params: Promise<{ slug: string }>
}) {
  return (
    <Suspense>
        <SuspensedPage params={params}></SuspensedPage>
    </Suspense>
  );
}

async function SuspensedPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  return <h1>Blog Post: {slug}</h1>
}
    Login or Signup to reply.
  2. 0

    I encountered the same issue and found a solution. The error message doesn’t clearly explain the problem. I’m not an expert, but I hope this helps you.

    The issue arises when creating a client component that uses usePathname within a use client directive and placing this client component inside a React Server Component (RSC) that is part of a dynamic route. This can occur in the layout or page of a dynamic route, such as .../[id]/page.tsx or ...layout.tsx/[id]/page.tsx. This might be similar to your situation.

    I noticed that you have a searchQuery component that might be using usePathname. Try using a server function to get the pathname like this:

    import { headers } from "next/headers";

// new component
export async function getPathname() {
  const headersList = await headers();
  const pathname = headersList.get("referer");
  // "referer" is an existing header that contains the full URL starting with `http`
  return pathname;
}

    If you want to see all existing headers, try this:

    console.log(
  Array.from(headersList.entries()).map(([key, value]) => ({ key, value }))
);

    I hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search