interface Post {
  id: number;
  title: string;
  body: string;
  userId: number;
  tags: string[];
}

async function getPost(id: string) {
  const response = await fetch(`/${id}`, {
    cache: id === '1' || id === '2' ? 'force-cache' : 'no-store',
    next: {
      revalidate: id === '1' || id === '2' ? false : 3600 // only revalidate dynamic routes
    }
  });
  return response.json();
}

export async function generateStaticParams() {
  return [
    { id: '1' },
    { id: '2' },
  ];
}

export const dynamicParams = true;
export const revalidate = 3600; // revalidate the page every hour

interface PageProps {
  params: Promise<{ id: string }>;
}

export default async function PostDetail({ params }: PageProps) {
  const response = await params
  const id = response.id
  const post: Post = await getPost(id);
  const timeStamp = new Date().toString();

  return (
    <div className="p-4 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold mb-4">{post.title}</h1>
      <h3>{timeStamp}</h3>
      <div className="bg-white rounded-lg shadow-lg p-6">
        <p className="text-gray-700 mb-4">{post.body}</p>
        <div className="flex gap-2 mb-4">
          {post.tags.map((tag) => (
            <span key={tag} className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">
              {tag}
            </span>
          ))}
        </div>
        <div className="text-gray-600">
        </div>
      </div>
    </div>
  );
}

Here is my code. The effect I would like to achieve is: Statically generate posts/1 and posts/2. Then when I access /posts, the server should automatically and statically generate the other webpages since I might access them. Like the fallback: true in the page router.

However, with these codes, when I run npm run build and npm run start. I can successfully access posts/1 and posts/2, but posts/3 returns 500: Internal Server Error. How can I fix it?