WordPress Integration
Learn how to fetch and display WordPress content in Next.js
Fetching Posts
Use the WordPress API functions to fetch posts, pages, and other content.
Example: Fetch a Single Post
TSX
1
2import { getPostBySlug } from "@/lib/wordpress";
3
4export default async function PostPage({ params }: { params: { slug: string } }) {
5 const post = await getPostBySlug(params.slug);
6
7 if (!post) {
8 return <div>Post not found</div>;
9 }
10
11 return (
12 <article>
13 <h1>{post.title.rendered}</h1>
14 <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
15 </article>
16 );
17}
18Displaying Content
Render WordPress content with proper styling and formatting.
HTML/CSS Example
WordPress Post Preview
HTML
1
2<div class="wordpress-post">
3 <h1>Post Title</h1>
4 <div class="post-content">
5 <p>This is the post content from WordPress.</p>
6 </div>
7</div>
8API Functions
getPostBySlug(slug)
Fetches a single post by its slug from WordPress.
getPostsPaginated(page, perPage)
Fetches paginated posts with optional filters.
getAllCategories()
Retrieves all categories from WordPress.