React & Next.js

How to Display Latest WordPress Posts in Next.js

0

WordPress latest posts can be easily displayed in a Next.js app, but choosing the right method is crucial. Especially with the changes introduced in Next.js 13 regarding data fetching methods, using the correct approach is essential.

This article will guide you step by step through fetching and displaying the latest WordPress posts using the REST API in a Next.js app.

Fetching Data with the WordPress REST API

The WordPress REST API is a powerful tool that allows you to access WordPress site data externally. By using this API, you can easily retrieve the latest posts from a specific site. The API endpoint is `https://example.com/wp-json/wp/v2/posts`, where “example.com” should be replaced with your WordPress site domain.

Data Fetching with Next.js 13

In Next.js 13, since the traditional `getServerSideProps` method is no longer supported in the `app` directory, the data fetching approach has changed. Here’s how to use an `async` function to fetch data directly from the server.

Code Example

Below is an example of how to display the latest WordPress posts in a Next.js app by fetching posts using the WordPress REST API and rendering them server-side.

// app/page.tsx

import React from 'react';
import Head from 'next/head';

// Async function to fetch data on the server side
async function fetchPosts() {
  const res = await fetch('https://example.com/wp-json/wp/v2/posts');
  if (!res.ok) {
    throw new Error('Failed to fetch posts');
  }
  return res.json();
}

export default async function Home() {
  const posts = await fetchPosts();

  return (
    <div>
      <Head>
        <title>Latest WordPress Posts</title>
        <meta name="description" content="Latest posts from WordPress" />
      </Head>

      <main>
        <h1>Latest WordPress Posts</h1>
        <ul>
          {posts.map((post: any) => (
            <li key={post.id}>
              <h2>{post.title.rendered}</h2>
              <div dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }} />
            </li>
          ))}
        </ul>
      </main>
    </div>
  );
}

This code demonstrates how to fetch and render the latest WordPress posts in Next.js using the `app` directory structure introduced in Next.js 13. Each post is rendered with its title and excerpt, with the data being fetched from the WordPress REST API.

Detailed Explanation

  • `fetchPosts`: An async function that fetches data from the server. It calls the WordPress API to retrieve data in JSON format and throws an error if the fetch fails.
  • `Home` component: Renders the fetched post data. Each post’s title and excerpt are displayed.

Conclusion

Integrating WordPress and Next.js to fetch the latest posts is a simple yet flexible approach using the REST API. By understanding how to use the WordPress REST API and data fetching methods in Next.js 13, you can easily utilize WordPress content across other platforms.

Through the powerful combination of WordPress and Next.js, your website can effectively deliver content to more users. We hope this article helps enhance your project.

Leave a Reply