When i deploy my code to vercel i get this error you can see in the image. Local the page works perfect and doesnt give this error, but when i remove the await, i get this error:

Error: Route "/cases/[slug]" used `params.slug`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
    at slug (src\app\cases\[slug]\page.tsx:11:24)

Here is my code, does anyone know a solution:
page.tsx:

import { projecten } from '@/config/projecten'; // Ensure this path is correct and the projecten object is properly defined
import ProjectPageClient from './ProjectPageClient';
import Menu from '@/app/components/Menu';
import { navigation } from '@/config/navigation';

export async function generateMetadata({
    params,
  }: {
    params: Promise<{ slug: string }>
  }) {

    const slug = (await params).slug
    const project = projecten.projecten?.find((proj) => proj.link === slug);

    if (!project) {
        return {
            title: 'Project niet gevonden',
            description: 'Dit project bestaat niet.',
            keywords: ['not found'],
            openGraph: {
                images: [
                    {
                        url: '/assets/image/not-found.jpg',
                        width: 1200,
                        height: 630,
                        alt: 'Project niet gevonden',
                    },
                ],
                title: 'Project niet gevonden',
                description: 'Dit project bestaat niet.',
            },
        };
    }

    return {
        title: project.metaData?.title || project.title || 'Onbekend project',
        description: project.metaData?.description || 'Geen beschrijving beschikbaar',
        keywords: project.metaData?.keywords || project.tags || [],
        openGraph: {
            images: [
                {
                    url: project.image || '/assets/image/placeholder.jpg',
                    width: 1200,
                    height: 630,
                    alt: project.metaData?.title || project.title || 'Onbekend project',
                },
            ],
            title: project.metaData?.title || project.title || 'Onbekend project',
            description: project.metaData?.description || 'Geen beschrijving beschikbaar',
        },
    };
}

export function generateStaticParams() {
    const slugs = projecten.projecten?.map((proj) => proj.link) || [];
    return slugs.map((slug) => ({ slug }));
}

const NotFound = () => (
    <div>
        <h1>Project niet gevonden</h1>
        <p>Het project dat je zoekt bestaat niet of is verwijderd.</p>
    </div>
);

const ProjectPage = async ({
    params,
  }: {
    params: Promise<{ slug: string }>
  }) => {

    const slug = (await params).slug
    const project = projecten.projecten?.find((proj) => proj.link === slug);

    if (!project) {
        return <NotFound />;
    }

    return (
        <div>
            <Menu menu={navigation} />
            <ProjectPageClient project={project} />
        </div>
    );
};

export default ProjectPage;