大家晚安！我正在用新的Appdir开发NextJS应用程序。我想得到一些关于如何将props从客户端组件传递到服务器组件的帮助。我需要在单击按钮时过滤数组。我尝试过修改next.config.js文件夹的几种解决方案，但似乎都不起作用。欢迎任何帮助，提前感谢。代码要遵循。
我的传呼。tsx

import BaseClient from "./BaseClient";
import BaseServer from "./baseServer";

export default function AboutUs({
  params: { lng },
}: {
  params: { lng: string };
}) {
  return (
    <BaseClient lng={lng}>
      <BaseServer />
    </BaseClient>
  );
}

baseServer.tsx

import getPostMetadata from "@/hooks/usePostMetadata";
import PostList from "../../components/PostList";

export default function baseServer({}: {}) {
  const postMetadata = getPostMetadata();

  return (
    <div className="mx-auto mt-20 grid max-w-[1000px] grid-cols-3 place-items-center gap-y-6">
      {postMetadata &&
        postMetadata
          .sort(
            (a, b) => new Date(b.date).getDate() - new Date(a.date).getDate()
          )
          .map((post) => <PostList key={post.slug} {...post} />)}
    </div>
  );
}

baseClient.tsx

"use client";

import React, { ReactNode } from "react";
import Link from "next/link"
import Title from "../../components/UI/Title";
import { useTranslation } from "@/i18n/client";
import Button from "../../components/UI/Button";
import { FaBusinessTime, FaMobile, FaPencilRuler } from "react-icons/fa";

export default function BaseClient({
  children,
  lng,
}: {
  children: ReactNode;
  lng: string;
}) {
  const { t } = useTranslation(lng, "blog");

  return (
    <main>
      <div className="relative flex h-[450px] md:h-[600px]">
        <img
          className="absolute h-[450px] w-screen bg-yellow md:h-[600px]"
          src="/images/ball-bg.png"
          alt="initial-image"
        />
        <div className="absolute mt-10 flex h-full w-full flex-col px-10 md:mt-[200px] md:px-20">
          <div className="ml-4 flex gap-2">
            <Link href="/" className="text-blue">
              Home
            </Link>
            <div className="dark:text-dark">{">"}</div>
            <p className="dark:text-dark">{t("path")}</p>
          </div>

          <div className="mt-16 text-center">
            <Title bold large dark>
              {t("featuredTitle")}
            </Title>

            <div className="w- mx-auto mt-10 flex flex-col md:max-w-[50%] md:flex-row md:space-x-5">
              <input
                className="w-full rounded-md px-8 py-4 outline-none"
                type="text"
                placeholder={`${t("placeholder")}`}
              />

              <Button noMargin dark outline={false}>
                <h1 className="text-base"> {t("search")}</h1>
              </Button>
            </div>
          </div>
        </div>
      </div>

      <div className="mt-20 w-full space-y-4 text-center md:absolute md:-mt-20">
        <div className="hidden md:block">
          <Title bold dark>
            {t("title")}
          </Title>
        </div>

        <div className="px-2 md:hidden">
          <Title bold> {t("title")}</Title>
        </div>

        <div className="mx-auto grid w-[70%] grid-cols-1 gap-8 md:grid-cols-3">
          <button className="flex items-center justify-center gap-5 rounded-md bg-[#3d3d3d] p-4 transition-all hover:bg-[#333]">
            <FaMobile className="fill-yellow text-3xl" />{" "}
            <h1 className="text-lg">{t("development")}</h1>{" "}
          </button>

          <button className="flex items-center justify-center gap-5 rounded-md bg-[#3d3d3d] p-4">
            <FaPencilRuler className="fill-yellow text-3xl" />
            <h1 className="text-lg">{t("design")}</h1>
          </button>
          <button className="flex items-center justify-center gap-5 rounded-md bg-[#3d3d3d] p-4">
            <FaBusinessTime className="fill-yellow text-3xl" />
            <h1 className="text-lg">{t("business")}</h1>
          </button>
        </div>
      </div>

      {children}
    </main>
  );
}

usePostMetadata.ts

import fs from "fs";
import matter from "gray-matter";
import { PostMetadata } from "../types/PostMetadata";

const getPostMetadata = (): PostMetadata[] => {
  const folder = "posts/";
  const files = fs.readdirSync(folder);
  const markdownPosts = files.filter((file) => file.endsWith(".mdx"));

  //Get gray-matter data from each file
  const posts = markdownPosts.map((fileName) => {
    const fileContents = fs.readFileSync(`posts/${fileName}`, "utf8");
    const matterResult = matter(fileContents);
    return {
      title: matterResult.data.title,
      date: matterResult.data.date,
      subtitle: matterResult.data.subtitle,
      type: matterResult.data.type,
      img: matterResult.data.img,
      slug: fileName.replace(".mdx", ""),
    };
  });

  return posts;
};

export default getPostMetadata;