dangerouslySetInnerHTML để in nội dung trong cơ sử dữ liệu sang dạng html front-end (ok)

<section dangerouslySetInnerHTML={{ __html: contentHtml }} />

app\posts[postId]\page.tsx

import getFormattedDate from "@/lib/getFormattedDate";
import { getSortedPostsData, getPostData } from "@/lib/posts";
import { notFound } from "next/navigation";
import Link from "next/link";
export default async function Post({ params }: { params: { postId: string } }) {
  const posts = getSortedPostsData()
  const { postId } = await params
  if (!posts.find(post => post.id === postId)) notFound()
  const { title, date, contentHtml } = await getPostData(postId)
  const pubDate = getFormattedDate(date)
  return (
    <main className="px-6 prose prose-xl prose-slate dark:prose-invert mx-auto">
      <h1 className="text-3xl mt-4 mb-0">{title}</h1>
      <p className="mt-0">
        {pubDate}
      </p>
      <article>
        <section dangerouslySetInnerHTML={{ __html: contentHtml }} />
        <p>
          <Link href="/">← Back to home</Link>
        </p>
      </article>
    </main>
  )
}

Last updated

Was this helpful?