동적 블로그 웹사이트를 구축할 때 WordPress와 같은 CMS(콘텐츠 관리 시스템)와 같은 콘텐츠 소스에서 데이터를 가져오는 것이 일반적입니다.
최근에 저는 WordPress를 기존 Next.js 프로젝트에 통합해야 하는 문제에 직면했습니다. WordPress에서 호스팅되는 블로그가 있었는데 이를 Next.js 앱으로 마이그레이션하고 싶었습니다.
헤드리스 CMS로 WordPress를 사용할 수 있는 솔루션이 필요했습니다. 목표는 간단했습니다. 콘텐츠를 관리하는 데는 워드프레스의 강력한 기능을 활용하면서 콘텐츠를 표시하는 데는 최신 프론트엔드 프레임워크를 활용하는 것이었습니다.
이 글에서는 워드프레스를 Next JS 앱에 통합하는 방법을 살펴보겠습니다.
헤드리스 CMS를 사용하는 이유
헤드리스 CMS는 콘텐츠 관리(백엔드)와 표시 계층(프론트엔드)을 분리해 줍니다. 이를 통해 개발자는 기존 테마나 레이아웃의 제약을 받지 않고 콘텐츠가 전달되고 표시되는 방식을 보다 유연하게 제어할 수 있습니다.
성능과 확장성 측면에서 우수하며 프론트엔드에서 콘텐츠가 렌더링되는 방식을 더 잘 제어할 수 있습니다. 이 경우 콘텐츠 관리 시스템으로 워드프레스를 사용하지만 Next.js를 사용하여 보다 현대적이고 성능이 뛰어난 방식으로 콘텐츠를 표시합니다.
Next.js란 무엇인가요?
Next.js는 최적화된 서버 측 렌더링(SSR) 애플리케이션을 훨씬 쉽게 구축할 수 있는 강력한 React 기반 프레임워크입니다.
파일 기반 라우팅, API 라우팅, 정적 사이트 생성(SSG), 증분 정적 재생성(ISR) 등 다양한 기능을 바로 사용할 수 있는 기본 제공 기능을 제공합니다. 이 모든 기능 덕분에 빠르고 SEO 친화적인 웹사이트를 만드는 데 탁월한 선택입니다.
WordPress과 Next.js를 어떻게 연결하는지
WordPress을 헤드리스(Headless CMS)로 사용할 때, Next.js applicaiton과 WordPress 背着(backend)을 연결하는 두 가지 주요 방법이 있습니다.
-
WP REST API: WordPress는 내장된 REST API를 갖추고 있어 WordPress의 내용을 JSON 형식으로 가져올 수 있습니다.
-
WPGraphQL: WordPress는 GraphQL을 사용하여 헤드리스 내용 관리를 지원하고 있으며 (WPGraphQL과 같은 플러그인을 사용하여), React과 같은 전면 프레임 워크에서 blog post과 같은 특정 내용을 문의하고 가져올 수 있습니다.
REST API가 인기 있지만, 더 精巧한 쿼리와 유연성을 제공하는 WPGraphQL을 사용하겠습니다. GraphQL을 사용하면 정확하게 필요한 데이터만 요청할 수 있으며, 이를 통해 데이터 이전 양을 줄이고 パフォーマン스를 향상시킬 수 있습니다.
WordPress과 Next.js를 WPGraphQL을 사용하여 연결하는 과정
우선, WordPress 사이트에 WPGraphQL 플러그인을 설치해야 합니다. 이 플러그인은 WordPress 내에서 GraphQL API 기능을 활성화합니다. WordPress 관리자 대시보드로 이동하여 다른 플러그인과 마찬가지로 플러그인을 설치할 수 있습니다.
먼저, 플러그인으로 이동하여 새로 추가를 선택합니다. 그런 다음 WPGraphQL을 검색하고, 찾으면 플러그인을 설치하고 활성화하기만 하면 됩니다.
플러그인을 설치하고 활성화한 후, WordPress 대시보드에 GraphQL IDE가 나타납니다. 여기에서 프런트엔드 개발에 필요한 다양한 쿼리를 테스트할 수 있습니다.
프런트엔드로 이동하겠습니다.
Next.js에서 WPGraphQL 데이터 가져오는 방법
Next.js 프로젝트에서 GraphQL API에서 데이터를 가져와야 합니다. 다음은 graphql-request를 사용한 간단한 예제입니다:
1. GraphQL API 쿼리를 쉽게 하기 위해 graphql-request를 설치합니다:
npm install graphql-request
2. Next.js 컴포넌트에서 블로그 게시물을 가져오기 위한 GraphQL 쿼리를 만듭니다:
import BlogHeader from '@/components/blog/BlogHeader';
import BlogNewsletter from '@/components/blog/BlogNewsletter';
import BlogPosts from '@/components/blog/BlogPosts';
import Link from 'next/link';
import React from 'react';
import { request, gql } from "graphql-request";
const query = gql`
{
posts(first: 10) {
edges {
node {
id
title
excerpt
content
date
author {
node {
id
name
}
}
date
slug
featuredImage {
node {
sourceUrl
}
}
categories {
edges {
node {
name
}
}
}
}
}
}
}
`
export async function getStaticProps() {
try {
const posts: any = await request('https://blog.intercity.ng/graphql', query);
return {
props: { posts }
}
} catch (error) {
console.error('Error fetching posts:', error);
return {
props: {
posts: []
}
};
}
}
const Index = ({ posts }: { posts: any }) => {
return (
<main className="relative pb-10 pt-10 lg:pt-0 lg:mt-[-3%]">
<div className='t40-container w-full'>
<BlogHeader />
<BlogPosts posts={posts} />
<BlogNewsletter />
</div>
</main>
)
}
export default Index
위 코드에서 Next.js 앱은 GraphQL을 사용하여 WordPress 백엔드에서 블로그 게시물을 가져와 프런트엔드에 표시합니다. GraphQL 쿼리는 제목, 작성자, 내용 및 특집 이미지를 포함한 게시물 세부 정보를 가져오도록 작성되었습니다.
Next.js의 getStaticProps를 사용하여 빌드 시 데이터가 가져와지고 구성 요소에 props로 전달됩니다. 블로그 게시물은 BlogHeader, BlogPosts 및 BlogNewsletter와 같은 커스텀 컴포넌트를 통해 렌더링되어 페이지를 동적이고 효율적으로 만듭니다.
이 예제는 WordPress를 Next.js 애플리케이션의 헤드리스 CMS로 사용하는 방법을 보여줍니다. 이제 성공적으로 Next.js 애플리케이션에 WordPress를 헤드리스 CMS로 통합했으므로, GraphQL API로부터 더 많은 데이터를 가져와 앱의 기능을 향상시킬 수 있습니다.
결론
WordPress를 헤드리스 CMS로 사용하고 Next.js를 프론트엔드로 사용함으로써, WordPress의 강력한 콘텐츠 관리 기능을 활용하면서 빠르고 SEO 친화적인 블로그를 구축할 수 있습니다.
WPGraphQL을 사용하여 필요한 데이터만 효율적으로 가져와 더 많은 제어를 가능하게 하고 사이트의 성능을 향상시켰습니다.
이 내용이 유용했기를 바랍니다. 즐거운 코딩 되세요!
Source:
https://www.freecodecamp.org/news/integrate-wordpress-with-nextjs/