Problems with metadata internalisation.

[mkireva]

Hello all,

I try to internalise the metadata of the page and receive a type error by runnung next run build. Here is the error src/app/[locale]/project/page.tsx
Type error: Type 'Params' does not satisfy the constraint 'PageProps'.
Types of property 'params' are incompatible.
Type '{ locale: string; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]

Static worker exited with code: 1 and signal: null
 ELIFECYCLE  Command failed with exit code 1.

My code for the page is the following. What I'm doing wrong? Thank you very much.

import Image from "next/image";
import { Button } from "components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { ArrowRight, CheckCircle } from "lucide-react";
import { useTranslations } from "next-intl";
import { Metadata } from "next";
import { getTranslations } from "next-intl/server";

interface Params {
  params: {
    locale: string;
  };
}

export async function generateMetadata({
  params,
}: Params): Promise<Metadata> {
  const { locale } = await params;
  const t = await getTranslations({ locale, namespace: "project" });
  return {
    title: t("title"),
  };
}

export default async function Project() {
  const t = await getTranslations("project");

  return (
    <div className="flex flex-col min-h-screen bg-background">
      <main className="flex-1">
        <section className="w-full py-8 md:py-12">
          <div className="container px-4 md:px-6">
            <div className="flex flex-col md:flex-row items-center gap-8">
              <div className="flex-1 space-y-4">
                <h2 className="text-2xl font-bold tracking-tighter sm:text-3xl md:text-4xl">
                  {t("content.songs")}
                </h2>
                <p className="text-muted-foreground">{t("content.exemplar")}</p>
                <div className="flex gap-2">
                  <Button size="lg">
                    {t("content.button")}
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Button>
                </div>
              </div>
              <div className="flex-1">
                <Image
                  src="/cover-danov.jpg"
                  alt="Product Image"
                  width={400}
                  height={400}
                  className="rounded-lg shadow-xl"
                  style={{ width: "auto", height: "auto" }}
                  priority // Add this line
                />
              </div>
            </div>
          </div>
        </section>
        <section className="w-full py-8 md:py-12 bg-muted">
          <div className="container px-4 md:px-6">
            <h2 className="text-2xl font-bold tracking-tighter sm:text-3xl text-center mb-8">
              {t("content.content")}
            </h2>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              {[
                t("content.allSongs"),
                t("content.bulgarianGerman"),
                t("content.latinTransliteration"),
                t("content.translation"),
                t("content.comments"),
                t("content.dictionary"),
                t("content.index"),
                t("content.qualityEdition"),
              ].map((feature, index) => (
                <Card key={index} className="bg-background">
                  <CardContent className="flex items-center p-4">
                    <CheckCircle className="h-5 w-5 text-primary mr-2 flex-shrink-0" />
                    <h3 className="font-semibold">{feature}</h3>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>
        <section className="w-full py-8 md:py-12">
          <div className="container px-4 md:px-6">
            <h2 className="text-2xl font-bold tracking-tighter sm:text-3xl text-center mb-4">
              {t("content.projectInfo")}
            </h2>
            <div className="grid gap-6 lg:grid-cols-2 items-start">
              <div className="space-y-4">
                <p>{t("content.paragraph2")}</p>
                <p>{t("content.paragraph3")}</p>
                <p>{t("content.paragraph4")}</p>
              </div>
              <div className="space-y-4">
                <p>{t("content.paragraph5")}</p>
                <p>{t("content.paragraph6")}</p>
                <p>{t("content.paragraph7")}</p>
                <p>{t("content.paragraph8")}</p>
                <Button size="lg">
                  {t("content.button")}
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}

[amannn]

Likely this is the cause: https://nextjs.org/blog/next-15#async-request-apis-breaking-change