Fetching Your Blog Post Content

In this section, we will guide you through fetching the content of a specific blog post from ContentNext.

Fetch the Blog Post content

We will first create the following file src/app/blog/[slug]/page.tsx

Use the fetchBlogPostContent function to fetch the content of a specific blog post based on the slug, and then render the page:

src/app/blog/[slug]/page.tsx

import { fetchBlogPostContent } from "@/actions/blogActions";
 
export default async function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  const { slug } = params;
 
  const blogPostContent: BlogPostContentResponse = await fetchBlogPostContent(
    slug
  );
 
  return (
    <div>
      <h1>{blogPostContent.data.title}</h1>
      <p>
        By {blogPostContent.data.author} on{" "}
        {new Date(blogPostContent.data.createdAt).toLocaleDateString()}
      </p>
      <div dangerouslySetInnerHTML={{ __html: blogPostContent.data.content }} />
    </div>
  );
}

Fetching your blog posts