Error[DYNAMIC_SERVER_USAGE]: DYNAMIC_SERVER_USAGE with generateStaticParams and Server Components (Next.js 14) on navigating to individual Job details Page.

[lalitdotdev]

Error: DYNAMIC_SERVER_USAGE in Individual Job Page Component (Next.js 14)

Description:

Encountering a 500 Internal Server Error when rendering my individual job page component in production on Vercel. I'm currently using generateStaticParamsto generate potential paths for job pages. However, I understand thatgenerateStaticParams creates static pages at build time, which might be conflicting with the dynamic nature of server components.

Steps to Reproduce:

1. Visit the individual job page on the development server (usually http://localhost:3000). The page renders correctly.
2. Deploy the application to Vercel.
3. Access the individual job page on Vercel. The 500 error occurs.

Relevant Code:

// JobDetailsPage.js
import { getJob } from "@/lib/db"; // Assuming your data fetching logic is in `db.js`

export async function generateStaticParams() {
    const jobs = await db.job.findMany({
        where: {
            approved: true,
        },
        select: {
            slug: true,
        },
    });
    return jobs.map(({ slug }) => slug);
}

function JobDetailsPage({ job }) {
    // Use the fetched `job` data for rendering
    ...
}

Logs :

 ⨯ [Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: 'DYNAMIC_SERVER_USAGE',
  page: '/jobs/full-stack-developer-at-apple-7'
}
[Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] {
  digest: 'DYNAMIC_SERVER_USAGE',
  page: '/jobs/full-stack-developer-at-apple-7'
}
Error: Runtime exited with error: exit status 1

Expected Behavior:

The job page should dynamically fetch job details based on the URL slug and render accordingly. I want the page to function dynamically, updating the content based on incoming requests.

[github-actions]

Stale issue message