React & Next.js

WordPress 최신 게시물을 Next.js에서 표시하는 방법

0

WordPress의 최신 게시물을 Next.js 앱에서 표시하는 것은 기술적으로 복잡하지 않지만, 효과적인 방법을 선택하는 것이 중요합니다. 특히 최신 버전인 Next.js 13부터는 데이터 패칭 방식이 일부 변경되었으므로, 올바른 방법을 사용하는 것이 필요합니다.

이 글에서는 Next.js 앱에서 WordPress REST API를 사용해 최신 게시물을 가져오는 방법을 단계별로 살펴보겠습니다.

WordPress REST API와 데이터 가져오기

WordPress REST API는 워드프레스 웹사이트의 데이터를 외부에서 접근할 수 있도록 해주는 강력한 도구입니다. 이 API를 사용해 특정 사이트의 최신 게시물을 쉽게 가져올 수 있습니다. API 엔드포인트는 `https://example.com/wp-json/wp/v2/posts`이며, 여기서 “example.com”은 본인의 워드프레스 사이트 도메인으로 대체해야 합니다.

Next.js 13을 사용한 데이터 패칭 방법

먼저, Next.js 13에서는 `getServerSideProps`와 같은 기존 방식이 `app` 디렉터리에서 지원되지 않기 때문에, 데이터를 패칭하는 방법이 다릅니다. 이제부터 `async` 함수를 사용해 서버에서 직접 데이터를 가져오는 방식을 소개하겠습니다.

코드 예시

아래 코드를 통해 최신 WordPress 게시물을 Next.js 앱에 표시하는 방법을 살펴보겠습니다. 이 코드는 WordPress REST API를 통해 게시물을 가져오고, 서버 사이드에서 처리한 후 렌더링하는 예시입니다.

// app/page.tsx

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

// 데이터를 서버 측에서 가져오는 비동기 함수
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>
  );
}

이 코드는 Next.js 13의 `app` 디렉터리 구조에서 데이터를 서버 사이드에서 패칭해 바로 렌더링하는 방식입니다. 각 게시물은 제목과 요약 부분이 렌더링되며, WordPress REST API로부터 데이터를 가져오고 있습니다.

상세 설명

  • `fetchPosts`: 서버 측에서 데이터를 가져오는 함수입니다. WordPress API를 호출해 JSON 형식으로 데이터를 받아오며, 실패 시 에러를 발생시킵니다.
  • `Home` 컴포넌트: 서버에서 받아온 게시물 데이터를 렌더링합니다. 각 게시물은 제목과 요약을 표시합니다.

결론

WordPress와 Next.js를 연동해 최신 게시물을 가져오는 방식은 REST API를 활용해 간단하면서도 유연한 방법입니다. WordPress REST API의 사용법과 Next.js 13에서의 데이터 패칭 방식을 제대로 이해하면, 워드프레스의 콘텐츠를 손쉽게 다른 플랫폼에서 활용할 수 있습니다.

WordPress와 Next.js의 강력한 결합을 통해 여러분의 웹사이트가 더 많은 사용자들에게 효과적으로 콘텐츠를 전달할 수 있기를 바랍니다. 이 글을 통해 여러분의 프로젝트에 도움이 되길 바랍니다.

답글 남기기