page.tsx in App Router

page.tsx

// posts/[postId]/page.tsx
import React from "react";

const getCommentsData = async (postId: string) => {
  try {
    const res = await fetch(
      `https://jsonplaceholder.typicode.com/comments?postId=${postId}`
    );

    if (!res.ok) {
      // This will activate the closest `error.js` Error Boundary
      throw new Error("Failed to fetch data");
    }

    return res.json();
  } catch (error) {
    console.log(error);
  }
};

// We're adding this here to disable the default caching of subsequent
// requests so that the loading UI can be displayed even after refreshing
// the page.
export const dynamic = "force-dynamic";

export default async function EachPostPage({ params }: any) {
  const data = await getCommentsData(params.postId);

  console.log(data)

  return (
    <div>PostPage</div>
  );
}