Как передать объект компоненту страницы при использовании динамической маршрутизации в NextJS?

Я использую маршрутизатор "app" в NextJS и хочу использовать Динамические маршруты в контексте динамического создания страниц для постов в блоге.

У меня возникли проблемы с тем, как передать объект на динамически созданную страницу, например, объект Post с типом {id: number, title: string, likes: number}. Насколько я могу судить, это не представляется возможным.

В лучшем случае, скажем, у меня есть маршрут /posts/[id], например. /posts/1, то я смогу захватить 1 внутри динамически созданной страницы, определив тип:

и используя его следующим образом:

Однако, похоже, невозможно захватить весь пользовательский объект, например объект Post на динамически созданной странице.

Структура каталога

./app/posts/page.tsx

./app/posts/[id]/page.tsx

Один из способов получить доступ к определенной странице — использовать идентификатор, указанный в PostPageProps, для фильтрации определенной интересующей записи после загрузки данных (которые существуют в виде файла .json в /public). Однако это означало бы, что мне пришлось бы загружать весь файл json и фильтровать его для определенного поста каждый раз, когда я захожу на определенную страницу поста. Это нехорошо с точки зрения производительности, поэтому я пытаюсь загрузить все сразу на "родительской" странице, с которой я могу отправлять каждый пост на динамически созданную страницу (маршрут). Это способ сделать это, если вы используете маршрутизатор App в NextJS, обратите внимание, что это заменяет использование getStaticProps, что не имеет значения в моем случае.

Если есть лучший способ сделать это, не стесняйтесь просветить меня.

interface PostPageProps {
  params: {
    id: string;
  };
}

export default async function PostPage({ params }: PostPageProps) {
    // ...
    // params.id is available to me.
}

/app
  - /components
  - /posts
    - /[id]
      - page.tsx
    - page.tsx
  - favicon.ico
  - globals.css
  - layout.tsx
  - page.tsx

"use client";

// ...

type Post = {
  id: number;
  title: string;
  likes: number;
};

export default function Page() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    async function fetchPosts() {
      ...
    }

    fetchPosts();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error}</p>;

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-3xl font-bold underline">
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`} className="block">
              {post.title}
            </Link>
          </li>
        ))}
      </h1>
    </main>
  );
}

type Post = {
  id: number;
  title: string;
  likes: number;
};

interface PostPageProps {
  params: {
    id: string;
  };
}

export default async function PostPage({ params }: PostPageProps) {
  const { id } = params;
  console.warn(params);
  return (
    <div>
      <h1>{id}</h1>
    </div>
  );
}