Fetching Your Blog Posts

In this section, we will guide you through fetching your blog posts from ContentNext.

Install the sdk

First you'll need to install the sdk so you can fetch your blog posts:

npm install @content-next/sdk

Create the Server Actions File

Let's now create a new file named blogActions.ts in your project's server actions directory (e.g., src/actions).

src/actions/blogActions.ts

"use server";
 
import { BlogPostContentResponse, BlogPostsResponse, ContentNextSDK } from "@content-next/sdk";
 
const contentNext = new ContentNextSDK(process.env.CONTENTNEXT_KEY!);
 
export const fetchBlogPosts = async (
  page: number = 1,
  size: number = 10
): Promise<BlogPostsResponse> => {
  const data = await contentNext.getBlogPosts(
    process.env.CONTENTNEXT_WEBSITE_ID!,
    page,
    size
  );
  return data;
};
 
export const fetchBlogPostContent = async (
  slug: string
): Promise<BlogPostContentResponse> => {
  const data = await contentNext.getBlogPost(slug);
  return data;
};

Fetch the Blog Posts

The data returned is paginated so In our page we're going to handle that using searchParams. Default values are used if these parameters are not provided:

src/app/blog/page.tsx

export default async function BlogPosts({
  searchParams,
}: {
  searchParams: { size: string | undefined; page: string | undefined };
}) {
  const page = searchParams.page ? parseInt(searchParams.page) : 1;
  const size = searchParams.size ? parseInt(searchParams.size) : 10;
 
  return <div></div>;
}

Next, use the fetchBlogPosts function to fetch the blog posts for the current page and size.

src/app/blog/page.tsx

const blogPosts: BlogPostsResponse = await fetchBlogPosts(page, size);

Also don't forget to import the dependencies:

src/app/blog/page.tsx

import { fetchBlogPosts } from "@/actions/blogActions";

Utilities for Pagination Controls

Determine whether to show pagination controls based on the total number of pages and the current page:

src/app/blog/page.tsx

const canNext = blogPosts.meta.totalPages > page;
const canPrevious = page > 1;

Summary

By combining the steps above we end up with something similar to this:

src/app/blog/page.tsx

import { fetchBlogPosts } from "@/actions/blogActions";
import Link from "next/link";
 
export default async function BlogPosts({
  searchParams,
}: {
  searchParams: { size: string | undefined; page: string | undefined };
}) {
  const page = searchParams.page ? parseInt(searchParams.page) : 1;
  const size = searchParams.size ? parseInt(searchParams.size) : 10;
 
  const blogPosts = await fetchBlogPosts(page, size);
 
  const canNext = blogPosts.meta.totalPages > page;
  const canPrevious = page > 1;
 
  return (
    <div>
      <h1>Blog Posts</h1>
      <div className="flex gap-2 flex-nowrap">
        {blogPosts.data.map((post) => (
          <Link href={`/blog/${post.slug}`} key={post.slug}>
            <h2>{post.title}</h2>
            <p>
              By {post.author} on{" "}
              {new Date(post.createdAt).toLocaleDateString()}
            </p>
          </Link>
        ))}
      </div>
      <div>
        {canPrevious && (
          <Link href={`?page=${page - 1}&size=${size}`}>Previous</Link>
        )}
        {canNext && <Link href={`?page=${page + 1}&size=${size}`}>Next</Link>}
      </div>
    </div>
  );
}

Prerequisites Getting your post's content