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

import { notFound } from "next/navigation";
import { headers } from "next/headers";
import React, { use } from "react";

export default async function PostDetail({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const h = await headers();
  const host = h.get("host") ?? "localhost:3000";
  const proto = h.get("x-forwarded-proto") ?? "http";
  const base = process.env.NEXT_PUBLIC_BASE_URL || `${proto}://${host}`;
  const res = await fetch(new URL(`/api/posts/${id}`, base).toString(), { cache: "no-store" });
  if (!res.ok) return notFound();
  const { post } = await res.json();
  return (
    <div>
      <h1>{post.title}</h1>
      <div style={{ display: "flex", gap: 8, margin: "8px 0" }}>
        <form action={`/api/posts/${post.id}/recommend`} method="post">
          <button type="submit">추천</button>
        </form>
        <form action={`/api/posts/${post.id}/report`} method="post">
          <button type="submit">신고</button>
        </form>
      </div>
      <p style={{ whiteSpace: "pre-wrap" }}>{post.content}</p>
    </div>
  );
}