I have migrated my nextjs website from pages router to app router and I am getting a DYNAMIC_SERVER_USAGE
error when I attempt to add page metadata using the generateMetadata
function.
I know that export const dynamic = "force-dynamic";
solves the error but I want to generate all of the pages at build time so that is not an option.
Why is generateMetadata
causing this error? Every reference I can find refers to pages that cannot be statically generated but all of the pages are built fine when I remove generateMetadata
and I am not calling any functions inside generateMetadata
.
Thanks
export const dynamic = "force-static";
import fs from "fs";
import path from "path";
import { getPostData, IPost } from "../../../lib/posts";
import Date from "../../../components/date";
import { Metadata } from "next";
const postsDirectory = path.join(process.cwd(), "src/posts");
interface IPageProps {
id: string;
}
export async function generateMetadata(): Promise<Metadata> {
return {
title: "title",
description: "description",
};
}
export default async function Page({
params,
}: {
params: Promise<IPageProps>;
}): Promise<JSX.Element> {
const { id } = await params;
const { title, date, contentHtml } = await getPostData(id);
return (
<div>
<article className="prose">
<h1 className="font-Inter text-3xl sm:text-4xl">{title}</h1>
<div className="text-2xl text-slate-500 md:text-xl">
<Date dateString={date} />
</div>
<div
className="text-mob md:text-lg lg:text-lg"
dangerouslySetInnerHTML={{ __html: contentHtml }}
/>
</article>
</div>
);
}
export async function generateStaticParams(): Promise<IPost[]> {
const fileNames = fs.readdirSync(postsDirectory);
return fileNames.map((fileName) => {
return {
params: {
id: fileName.replace(/\.md$/, ""),
},
};
});
}
After some trial and error I determined that this error was caused by the @sentry/nextjs
package. The error no longer occurred once I removed sentry from the project. I don't know why it caused an issue. Who needs observability anyway :D