Hi,

When I trying to deploy my app in production on Vercel, I have this error:

Failed to compile.
Type error: Page "app/blog/[slug]/page.tsx" exports an invalid "generateMetadata" field. Page should only export a default React component and configuration options. Learn more: https://nextjs.org/docs/messages/invalid-segment-export
ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1

My component:

import SingleBlog from "@/components/Blog/SingleBlog";
import Breadcrumb from "@/components/Common/Breadcrumb";
import Pagination from "@/components/Pagination";
import { getClient } from "@/lib/apollo-client";
import { PostDto } from "@/types/generated/graphql";
import { gql } from "@apollo/client";

const GET_PUBLISHED_POSTS_AND_BLOG_PAGE = gql`
  query GetPublishedPosts($pagination: PaginationInput!) {
    getPublishedPosts(pagination: $pagination) {
      posts {
        id
        title
        introduction
        postCategory {
          name
        }
        content
        slug
        publishedAt
        image
      }
      totalCount
      totalPages
    }
    getBlogPage {
      id
      title
      description
    }
  }
`;

const GET_METADATA = gql`
  query GetMeta {
    getBlogPage {
      id
      metaTitle
      metaDescription
    }
  }
`;

export async function generateMetadata() {
  const { data } = await getClient().query({
    query: GET_METADATA,
  });

  const { metaTitle, metaDescription } = data.getBlogPage;

  return {
    title: metaTitle || "Blog",
    description: metaDescription || "Découvrez nos dernières actualités.",
  };
}

const Blog = async () => {
  const { data } = await getClient().query({
    query: GET_PUBLISHED_POSTS_AND_BLOG_PAGE,
    variables: {
      pagination: {
        skip: 0,
        take: 12,
      },
    },
  });

  return (
    <></>
  );
};

export default Blog;

What is the problem please?