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>
);
}