WordPress와 Next.js를 사용하여 헤드리스 웹사이트를 구현하는 방법은 무엇인가요?

최신 웹사이트는 속도, 유연성, 그리고 탄탄한 SEO를 요구합니다. 헤드리스 WordPress는 이 세 가지를 모두 충족합니다. 콘텐츠 관리 시스템과 프런트엔드를 분리함으로써 WordPress의 친숙한 편집 환경과 Next.js의 초고속 렌더링 기능을 모두 활용할 수 있습니다.

이 가이드는 아키텍처 이해부터 실제 운영 환경에 적합한 헤드리스 사이트 배포까지 모든 과정을 안내합니다.

분리형 CMS 설정을 탐색하는 개발자이든 기존 WordPress 사이트를 현대화하려는 팀이든, 이 단계별 자료는 필요한 모든 것을 제공합니다.

요약: 빠르고 확장 가능한 헤드리스 웹사이트 구축하기

• 콘텐츠 관리와 프런트엔드를 분리하는 디커플링 방식을 사용하여 유연성을 높이세요.
• 효율적인 데이터 전달을 위해 REST API 또는 GraphQL을 통해 콘텐츠를 가져옵니다.
• 정적 이미지 생성, 서버 렌더링 및 스마트 캐싱을 통해 성능을 향상시키세요.
• 위해 최신 호스팅 플랫폼과 안전한 API에 배포하세요 속도, 확장성 및 보안을

헤드리스 워드프레스란 무엇이며, Next.js와 함께 사용해야 하는 이유는 무엇일까요?

이 스택의 강력함을 이해하려면 먼저 "헤드리스" 아키텍처의 개념과 이 두 가지 특정 기술이 왜 완벽한 조합을 이루는지 이해해야 합니다.

헤드리스 워드프레스 CMS 아키텍처 정의

기존 워드프레스 는 단일 구조 시스템입니다. 콘텐츠 저장, 비즈니스 로직, 페이지 렌더링을 모두 한 곳에서 처리합니다. 방문자가 사이트에 접속하면 워드프레스는 데이터베이스를 조회하고 PHP 템플릿을 처리한 후, 완전히 렌더링된 HTML 페이지를 제공합니다.

헤드리스 WordPress는 이러한 모델을 완전히 뒤집습니다. 헤드리스 아키텍처에서는 다음과 같은 특징이 있습니다

• WordPress는 백엔드 역할만 합니다. 콘텐츠 관리, 사용자 인증 및 데이터 저장을 담당합니다.

• 프런트엔드는 완전히 분리되어 있습니다. Next.js와 같은 JavaScript 프레임워크가 모든 렌더링 및 사용자 상호 작용을 처리합니다.

• API는 이 둘을 연결합니다. 를 통해 콘텐츠를 제공하고 REST API , Next.js는 해당 데이터를 가져와 페이지를 구축합니다.

"헤드리스"라는 용어는 워드프레스에서 프런트엔드 프레젠테이션 레이어인 "헤드"를 제거한 데서 유래했습니다.

여전히 WordPress 설치는 에 로그인하며 /wp-admin, 게시물은 이전과 같은 방식으로 생성됩니다. 하지만 방문자는 WordPress와 직접 상호 작용하지 않습니다. 방문자는 Next.js 프런트엔드와 상호 작용합니다.

백엔드와 프런트엔드를 분리할 때의 이점

워드프레스 백엔드와 프런트엔드 아키텍처를 분리하면 여러 가지 큰 이점을 얻을 수 있습니다

• 성능 향상: Next.js는 빌드 시점에 페이지를 정적 HTML로 사전 렌더링합니다. 모든 요청에 ​​대해 PHP 처리가 필요하지 않으므로 첫 번째 바이트 수신 시간(TTFB)이 크게 단축됩니다.

• 프런트엔드 자유도: WordPress를 건드리지 않고도 프런트엔드를 재구축하거나 재설계할 수 있습니다. 프레임워크를 교체하고, 레이아웃을 변경하거나, CMS 마이그레이션 없이 A/B 테스트를 실행할 수 있습니다.

• 보안 강화: WordPress 인스턴스는 공용 인터넷에서 숨겨진 개인 서버 또는 서브도메인에서 실행될 수 있습니다. 공격자는 wp-login.php를찾을 수 없으므로 공격 대상이 될 수 없습니다.

• 확장성에서 제공되는 정적 페이지는 CDN 트래픽 급증을 손쉽게 처리합니다. WordPress 서버는 API 요청만 수신하고 페이지 로드는 수신하지 않습니다.

• 다중 채널 콘텐츠 제공: 동일한 WordPress 콘텐츠 API를 사용하여 웹사이트, 모바일 앱, 음성 비서 및 키오스크에 동시에 콘텐츠를 제공할 수 있습니다.

• 개발자 경험 향상: 프런트엔드 팀은 PHP나 워드프레스 테마 개발을 배우지 않고도 이미 익숙한 React 및 JavaScript 도구를 사용하여 작업할 수 있습니다.

Next.js가 헤드리스 WordPress 성능 및 SEO에 이상적인 이유는 무엇일까요?

Next.js는 여러 가지 이유로 헤드리스 CMS 프로젝트를 위한 자바스크립트 프레임워크 중에서 두드러집니다.

• 서버 측 렌더링(SSR)과 정적 사이트 생성(SSG)을 사용하면 페이지가 렌더링되는 시점과 방식을 제어할 수 있습니다. 블로그 페이지는 빌드 시점에 정적으로 생성하고, 자주 변경되는 제품 페이지는 서버에서 렌더링하거나, 사이트 전체에 걸쳐 두 가지 전략을 혼합하여 사용할 수 있습니다.

• 내장 이미지 최적화 기능은 통한 next/image 지연 로딩을 통해 적절한 크기의 WebP 형식 이미지를 자동으로 제공합니다. 이는 Core Web Vitals 점수를 직접적으로 향상시킵니다.

• 파일 기반 라우팅을 사용하면 동적 라우팅이 간편해집니다. [slug].js pages 디렉터리에

• API 라우트를 사용하면 별도의 백엔드 없이 폼 처리나 웹훅 처리와 같은 서버 측 로직을 Next.js 프로젝트에 직접 추가할 수 있습니다.

• SEO 기능은 기본적으로 제공됩니다. Next.js는 서버에서 전체 HTML을 렌더링하므로 검색 엔진 크롤러는 JavaScript 실행을 기다릴 필요 없이 페이지 콘텐츠를 완벽하게 수신할 수 있습니다. ` next/head` 메타 태그 구성 요소를 함께 사용하면 웹사이트의 SEO 경쟁력을 유지할 수 있습니다.

WordPress 콘텐츠 가져오기에서 REST API와 GraphQL 비교

WordPress는 헤드리스 설정을 위한 두 가지 API 방식을 제공합니다

WordPress REST API는 WordPress 코어에 포함되어 있습니다. 추가 플러그인이 필요하지 않습니다. 게시물에는 `/wp-json/wp/v2/posts` 엔드포인트를, 페이지에는 `/wp-json/wp/v2/pages` 엔드포인트를 제공합니다. ` fetch()` 있으며, 간단한 콘텐츠 요구 사항에 적합합니다.

WPGraphQL은 받는 대신 JSON 수십 개의 불필요한 필드가 포함된

이렇게 하면 페이로드 크기가 줄어들고, 중첩된 데이터 가져오기(예: 단일 요청으로 게시물, 카테고리 및 작성자 정보)가 간소화되며, 프런트엔드 팀이 작업할 수 있는 강력한 형식의 스키마를 제공합니다.

소규모 프로젝트나 GraphQL을 처음 접하는 팀의 경우 REST API로도 충분합니다. 하지만 콘텐츠 관계가 복잡한 대규모 사이트의 경우 WPGraphQL이 일반적으로 더 나은 성능과 깔끔한 ​​개발 환경을 제공합니다.

WordPress 및 Next.js 헤드리스 환경 구축을 위한 필수 조건

코드를 작성하기 전에 탄탄한 기초를 다지고 개발 환경을 준비해야 합니다.

필요한 도구 및 환경 설정

헤드리스 WordPress 설정 과정을 따라하려면 컴퓨터에 다음 도구들이 설치되어 있어야 합니다

• Node.js(버전 18 이상): nodejs.org에서 다운로드하세요. `node -v` 명령어를 터미널에서

• npm 또는 Yarn: npm은 Node.js에 기본적으로 포함되어 있습니다. Yarn은 선택 사항이지만 일부 팀에서는 선호합니다.

• 실행 중인 WordPress 설치 환경: 로컬 환경(LocalWP, MAMP 또는 Docker) 또는 호스팅된 인스턴스. 유일한 요구 사항은 HTTP를 통해 접근 가능해야 한다는 것입니다.

• 코드 편집기: VS Code 에 ESLint와 Prettier 확장 프로그램을 설치하면 최고의 Next.js 개발 환경을 경험할 수 있습니다.

• Git: 버전 관리 및 배포 워크플로우를 위한 도구입니다.

로컬 WordPress 개발의 경우, LocalWP는 아무런 설정 없이 컴퓨터에 WordPress 사이트를 구축하는 가장 빠른 방법입니다.

필수 워드프레스 플러그인 설치 (WPGraphQL, REST API)

WordPress REST API는 모든 최신 WordPress 설치에서 기본적으로 활성화되어 있습니다. https://yoursite.com/wp-json/wp/v2/posts 브라우저에서

WPGraphQL의 경우:

• 워드프레스 대시보드에 로그인하세요.

• 로 이동하세요 플러그인 → 새 플러그인 추가.

• WPGraphQL을 검색하고 Jason Bahl이 만든 플러그인을 설치하세요.

• 활성화하세요.

• 대시보드에 새로운 GraphQL 메뉴 항목이 나타났습니다. GraphQL → 설정 에서 엔드포인트를 구성하세요.

WPGraphQL for ACF를 설치할 수도 있습니다 Advanced Custom Fields를GraphQL 스키마를 통해 사용자 정의 필드 데이터를 노출하는

GraphQL 엔드포인트를 테스트하려면 GraphQL → GraphiQL IDE로 이동하세요. 이 대화형 플레이그라운드를 사용하면 Next.js 프로젝트에서 사용하기 전에 쿼리를 작성하고 테스트할 수 있습니다.

헤드리스 배포를 위한 WordPress API 구성

WordPress 설정 중 일부는 헤드리스 API 전송에 영향을 미칩니다

• 고유 링크: 로 이동하여 설정 → 고유 링크 "일반" 이외의 옵션을 선택하세요. REST API는 일반 고유 링크에서 제대로 작동하지 않습니다. "게시물 이름"(/%postname%/)이 가장 일반적인 선택입니다.

• CORS 헤더: 기본적으로 WordPress REST API 응답은 Next.js 개발 서버에서 오는 다른 출처의 요청을 차단할 수 있습니다. WordPress 테마의 functions.php 하거나 WP CORS와 같은 플러그인을 사용하여 Next.js 도메인에서의 요청을 허용하세요.

• 애플리케이션 암호: 비공개 또는 초안 콘텐츠의 경우 WordPress는 애플리케이션 암호(WordPress 5.6에서 도입)를 지원합니다. 사용자 프로필에서 암호를 생성하고 API 요청 시 기본 인증 헤더에 포함하세요.

• 공개 콘텐츠 표시 여부: 표시하려는 게시물이 비밀번호로 보호되거나 비공개가 아닌 게시된 상태인지 확인하세요.

시작하기 전에 React와 Next.js의 기본 사항을 이해하기

헤드리스 WordPress 개발을 위해서는 다음과 같은 사항에 대한 이해가 필요합니다.

• React 기본 사항: 컴포넌트, props, state, 그리고 useEffect 및 useState 훅.

• Next.js 페이지 렌더링 메서드: 의 차이점을 이해하는 것은 getStaticProps, getServerSideProps및 getStaticPaths 필수적입니다.

• 비동기 JavaScript: 사용하여 비동기 데이터 가져오기 코드를 작성하게 됩니다 async/await를 Fetch API의

• JSX 구문: 자바스크립트 내에서 HTML과 유사한 구문을 작성하는 방법.

Next.js를 처음 접하는 경우, 이 프로젝트를 시작하기 전에 nextjs.org/learn에서 제공하는 공식 Next.js 튜토리얼을 몇 시간 동안 살펴보는 것이 도움이 될 것입니다.

WordPress와 Next.js를 연결하는 단계별 가이드

연결해 보겠습니다 백엔드와 프런트엔드를. 이 가이드에서는 정적 블로그 아키텍처에 널리 사용되는 Next.js 페이지 라우터 패러다임을 사용합니다.

1단계: 새 Next.js 프로젝트 생성 및 구성

터미널을 열고 create-next-app 유틸리티를 사용하여 새 Next.js 애플리케이션을 생성하세요.

npx create-next-app@latest my-headless-site cd my-headless-site

설치 마법사는 TypeScript, ESLint, Tailwind CSS 및 앱 라우터를 사용할지 묻습니다. 이 가이드에서는 기존 튜토리얼 및 플러그인과의 호환성을 극대화하기 위해 페이지 라우터를 선택하세요. TypeScript는 규모가 큰 프로젝트에 권장됩니다.

다음으로, .env.local 프로젝트 루트에

NEXT_PUBLIC_WORDPRESS_API_URL=https://your-wordpress-site.com/wp-json/wp/v2 WORDPRESS_GRAPHQL_ENDPOINT=https://your-wordpress-site.com/graphql

이 파일을 버전 관리 시스템에 커밋하지 마십시오. .env.local을 파일에 .gitignore.

2단계: REST API와 getStaticProps를 사용하여 WordPress 데이터 가져오기

경로에 파일을 생성하세요 pages/blog/index.js. 이 페이지에는 WordPress REST API에서 가져온 모든 블로그 게시물이 나열됩니다.

export default function BlogIndex({ posts }) { return (<ul> {posts.map((post) => (<li key={post.id}> <a href={`/blog/${post.slug}`}>{post.title.rendered}</a></li> ))}</ul> ); } export async function getStaticProps() { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?_embed&per_page=100` ); const posts = await res.json(); return { props: { posts }, revalidate: 60, }; }

getStaticProps는 서버에서 빌드 시점에 실행됩니다. 이 함수는 WordPress에서 게시물을 가져와 컴포넌트에 props로 전달합니다. revalidate :60은 고급 섹션에서 다루는 증분 정적 재생성을 활성화합니다.

3단계: Apollo 또는 GraphQL 클라이언트를 사용하여 WPGraphQL 사용하기

보다 확장성이 뛰어난 접근 방식을 위해서는 WPGraphQL을 사용하세요. 먼저 Next.js 프로젝트에 경량 GraphQL 클라이언트를 설치합니다.

npm install @apollo/client graphql

경로에 유틸리티 파일을 생성하세요 lib/apolloClient.js.

import { ApolloClient, InMemoryCache } from "@apollo/client"; const client = new ApolloClient({ uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT, cache: new InMemoryCache(), }); export default client;

에서 GraphQL을 사용하여 WordPress 게시물을 쿼리합니다 getStaticProps.

`import client from "../../lib/apolloClient"; import { gql } from "@apollo/client"; const GET_POSTS = gql` query GetPosts { posts { nodes { id title slug date excerpt featuredImage { node { sourceUrl altText } } } } } `; export async function getStaticProps() { const { data } = await client.query({ query: GET_POSTS }); return { props: { posts: data.posts.nodes }, revalidate: 60, }; }

이 접근 방식은 프런트엔드에서 사용하는 필드만 가져오므로 API 응답을 간결하게 유지합니다.

4단계: 블로그 페이지를 위한 동적 경로 및 정적 생성

각 블로그 게시물에 대한 개별 페이지를 만들려면 동적 라우팅을 사용해야 합니다. Next.js에서는 [slug].js 안에 pages/posts/ 디렉토리

사용하고 getStaticPaths를 Next.js에 어떤 URL을 빌드할지 알려주려면 getStaticProps를 각 URL에 대한 특정 콘텐츠를 가져오려면

export async function getStaticPaths() { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?per_page=100` ); const posts = await res.json(); const paths = posts.map((post) => ({ params: { slug: post.slug }, })); return { paths, fallback: "blocking" }; } export async function getStaticProps({ params }) { const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&_embed` ); const posts = await res.json(); if (!posts.length) { return { notFound: true }; } return { props: { post: posts[0] }, revalidate: 60, }; }

`getStaticPaths`는 Next.js에게 어떤 슬러그를 사전 렌더링할지 알려줍니다. `fallback: "blocking"` 초기 빌드에 포함되지 않은 슬러그는 첫 번째 요청 시 서버에서 렌더링된 후 정적 페이지로 캐시됩니다.

5단계: 게시물 내용, 이미지 및 사용자 정의 필드 처리

WordPress는 게시물 본문 내용을 사용하여 안전하게 렌더링하세요 dangerouslySetInnerHTML을.

<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />

추천 이미지의 경우 _embed 쿼리 매개변수를 사용합니다. 이미지 URL은 post._embedded['wp:featuredmedia'][0].source_url을.

로 감싸면 Image 자동으로 최적화됩니다.

"next/image"에서 이미지를 가져옵니다. <Image src={post._embedded["wp:featuredmedia"][0].source_url} alt={post.title.rendered} width={1200} height={630} />

고급 사용자 정의 필드(ACF)를 사용하려면 WPGraphQL for ACF 플러그인을 활성화하세요. 그러면 사용자 정의 필드 데이터가 GraphQL 스키마에 나타나 표준 POST 데이터와 함께 쿼리할 수 있습니다.

헤드리스 WordPress 및 Next.js를 위한 고급 기술

기본 기능이 제대로 작동하면 고급 기능을 구현하여 사이트를 기업용 애플리케이션처럼 만들 수 있습니다.

점진적 정적 재생(ISR)을 사용하여 최적화

ISR을 사용하면 전체 사이트를 다시 빌드하지 않고도 배포 후 정적으로 생성된 페이지를 업데이트할 수 있습니다. 설정 방법은 사용 중인 Next.js 라우터에 따라 다르며, 이 둘을 혼동하면 버그가 발생하는 경우가 많습니다.

페이지 라우터 ISR(시간 기반)

추가하세요 재검증 값(초)을 getStaticProps .

return { props: { post }, revalidate: 300, // 5분마다 다시 생성 };

사용자가 재검증 기간이 만료된 후 페이지를 방문하면 Next.js는 캐시된 페이지를 즉시 제공하는 동시에 백그라운드에서 페이지를 다시 생성합니다. 다음 방문자는 최신 버전을 보게 됩니다.

페이지 라우터 ISR(주문형)

WordPress 게시 또는 업데이트 이벤트에 의해 트리거되는 온디맨드 재검증을 위해 pages/api/revalidate.js. WordPress는 웹훅을 통해 이 경로를 호출합니다.

export default async function handler(req, res) { if (req.query.secret !== process.env.REVALIDATION_SECRET) { return res.status(401).json({ message: "유효하지 않은 토큰" }); } const slug = req.query.slug; try { await res.revalidate(`/blog/${slug}`); return res.json({ revalidated: true }); } catch (err) { return res.status(500).send("재검증 오류"); } }

`res.revalidate()` 는 올바른 페이지 라우터 메서드입니다. 이 메서드는 시간 제한이 만료될 때까지 기다리지 않고 해당 경로에 대한 백그라운드 재생성을 즉시 실행합니다.

앱 라우터 ISR

를 사용하는 경우app/ 구문이 다릅니다. 시간 기반 재검증은 경로 세그먼트 구성 내보내기로 설정됩니다.

// app/blog/[slug]/page.js export const revalidate = 300;

앱 라우터에서 온디맨드 재검증은 revalidatePath() 또는 revalidateTag()에서 가져온 next/cacheAPI 라우트가 아닌 서버 액션 또는 라우트 핸들러 내부에서

// app/api/revalidate/route.js (앱 라우터 라우트 핸들러) import { revalidatePath } from "next/cache"; import { NextResponse } from "next/server"; export async function POST(request) { const { slug, secret } = await request.json(); if (secret !== process.env.REVALIDATION_SECRET) { return NextResponse.json({ message: "유효하지 않은 토큰" }, { status: 401 }); } revalidatePath(`/blog/${slug}`); return NextResponse.json({ revalidated: true }); }

핵심적인 차이점은 `res.revalidate()`는 페이지 라우터에 속하고, `revalidatePath()` 와 `revalidateTag()` 는 앱 라우터에 속한다는 것입니다. 페이지 라우터 프로젝트 내에서 앱 라우터 메서드를 사용하거나 그 반대로 하면 오류 메시지 없이 실행 오류가 발생할 수 있습니다. 실제로 사용하는 라우터에 맞는 메서드를 사용해야 합니다.

이 가이드의 단계별 섹션에서는 페이지 라우터를 사용합니다. 향후 앱 라우터로 마이그레이션할 경우, 모든 ISR 로직을 revalidatePath()를 라우트 핸들러에서

초안 콘텐츠에 미리보기 모드 추가

미리보기 모드를 사용하면 편집자가 게시하기 전에 Next.js 프런트엔드에서 WordPress 콘텐츠 초안을 볼 수 있습니다. 두 개의 API 경로를 설정하세요

• /api/preview: 미리보기 모드를 활성화하고 해당 게시물로 리디렉션합니다.
• /api/exit-preview: 미리보기 모드를 비활성화합니다.

WordPress 테마 또는 플러그인에서 미리보기 URL 로 https://your-nextjs-site.com/api/preview?secret=YOUR_SECRET&slug={slug}.

에서 getStaticProps미리보기 모드를 확인하고 초안 콘텐츠를 가져옵니다.

export async function getStaticProps({ params, preview, previewData }) { const authHeader = preview ? { Authorization: `Bearer ${previewData.token}` } : {}; const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&status=draft`, { headers: authHeader } ); // ... }

Next.js를 사용하여 사이트맵 및 SEO 메타데이터 생성하기

설치하세요 next-sitemap 자동 사이트맵 생성을 위해

npm install next-sitemap

생성 next-sitemap.config.js 하고 빌드 시 가져온 모든 WordPress 게시물 슬러그를 포함하도록 구성하세요. next-sitemap을 빌드 후 스크립트로 package.json.

페이지별 SEO 메타데이터를 사용하려면 `next/head` 컴포넌트를 사용하거나, 앱 라우터를 사용하는 경우 내장된 메타데이터 API를 사용하세요.

"next/head"에서 Head를 가져옵니다.<Head><title> {post.title.rendered} | 내 블로그 </title><meta name="description" content="{post.excerpt.rendered}" /><meta property="og:title" content="{post.title.rendered}" /><meta property="og:image" content={featuredImageUrl} /></Head>

WordPress에서 RankMath 플러그인을 사용하고 Add WPGraphQL SEO 플러그인을 통해 WPGraphQL을 통해 메타데이터를 노출하세요. 이렇게 하면 편집자가 WordPress에서 제목과 설명을 제어할 수 있으며, Next.js가 이를 가져와 렌더링합니다.

더 읽어보기: 워드프레스를 헤드리스 CMS로 사용하기

클라이언트 측 데이터 가져오기를 위한 캐싱 전략 및 SWR

모든 콘텐츠를 정적으로 생성할 필요는 없습니다. 사용자별 데이터, 댓글 또는 실시간 재고 정보는 클라이언트 측에서 가져오는 것이 더 효율적입니다. swr Vercel의

npm install swr

import useSWR from "swr"; const fetcher = (url) => fetch(url).then((r) => r.json()); function Comments({ postId }) { const { data, error } = useSWR( `/wp-json/wp/v2/comments?post=${postId}`, fetcher ); if (error) return<p> 댓글을 불러오는 데 실패했습니다.</p> ; 만약 (!data)이면 반환<p> 로딩 중...</p> ; 반품<ul> {data.map((c) =><li key={c.id}> {c.content.rendered}</li> )}</ul> ; }

SWR은 캐싱, 재검증 및 중복 제거를 자동으로 처리합니다. 오래된 데이터를 유지하면서 재검증하는 전략을 사용하는데, 캐시된 데이터는 즉시 반환하고 백그라운드에서 조용히 최신 데이터를 가져옵니다.

Next.js를 사용한 WordPress 배포, 성능 및 보안 모범 사례

Next.js 프런트엔드와 WordPress 백엔드를 별도의 서비스로 배포하세요. 이러한 분리는 헤드리스 모델의 핵심 장점 중 하나입니다.

Next.js 배포는 Next.js 팀에서 개발한 플랫폼인 Vercel에서 가장 잘 작동합니다. Vercel은 ISR, 엣지 캐싱, 이미지 최적화 및 환경 변수 관리를 기본적으로 제공합니다.

Netlify와 AWS Amplify는 훌륭한 대안입니다. 자체 호스팅 배포의 경우, `npm run build && npm start` 명령어를 Nginx 리버스 프록시 뒤에서

WordPress는 같은 일반적인 PHP 호스팅 업체WP Engine, Kinsta, SiteGround나 VPS에 배포할 수 있습니다. WordPress는 페이지 조회수가 아닌 API 응답만 제공하기 때문에, 규모가 작은 호스팅 업체라도 상당한 트래픽을 처리할 수 있습니다.

보안 강화 헤드리스 WordPress

• 과 같은 비공개 서브도메인으로 옮기세요 cms.yourdomain.com.
• XML-RPC를 비활성화합니다(add_filter('xmlrpc_enabled', '__return_false');).
• 사용하십시오 웹 애플리케이션 방화벽(WAF)을 Cloudflare와 같은
• 민감한 엔드포인트에 대해서는 인증된 요청만 허용하도록 WordPress REST API를 제한하세요.
• 워드프레스 코어, 테마 및 플러그인을 최신 상태로 유지하세요.
• API 인증에는 강력한 애플리케이션 암호를 사용하십시오.

성능 최적화 체크리스트:

• Next.js 정적 자산에 대한 CDN 전송을 활성화하세요.
• 사용하세요 `next/image`를 모든 이미지에 반응형 크기를 자동으로 생성하고 WebP 형식으로 제공합니다.
• 가능한 한 서버에서 컴포넌트를 렌더링하여 클라이언트 측 JavaScript 사용을 최소화하십시오.
• WordPress API 응답에 적절한 HTTP 캐시 헤더를 설정하세요.
• WordPress 객체 캐시(Redis 또는 Memcached)를 사용하여 API의 데이터베이스 쿼리 속도를 향상시키세요.

Next.js 헤드리스 설정에서 흔히 발생하는 문제점 해결 방법

헤드리스 환경으로 전환하는 것은 보람 있는 일이지만, 익숙해지는 데 시간이 걸립니다. 가장 흔한 문제점과 해결 방법을 소개합니다

• CORS 오류 발생 : 의 교차 출처 요청을 차단하고 있습니다 localhost:3000 에서 WordPress 도메인으로 functions.php 파일 하거나 WP CORS 플러그인을 사용하세요. 개발 및 프로덕션 Next.js 도메인 모두에 대해 교차 출처 요청을 허용해야 합니다.

• 퍼머링크에서 404 오류가 발생하는 경우: REST API는 일반 형식이 아닌 퍼머링크를 요구합니다. 설정 → 퍼머링크 일반 형식이 아닌 옵션을 모두 저장하세요. 변경 사항이 없더라도 저장하면 재작성 규칙이 초기화됩니다.

• Next.js에서 WordPress 이미지가 차단됨: Next.js는 보안상의 이유로 외부 이미지 도메인 접근을 제한합니다. WordPress 도메인을 next.config.js.

module.exports = { images: { domains: ["your-wordpress-site.com"], }, };

• 렌더링된 콘텐츠의 HTML 엔티티: WordPress REST API는 제목에 <br> 및 <br>과. 이를 디코딩하려면 간단한 유틸리티를 사용하거나 html-entities npm 패키지를 설치하세요.

• API 요청이 너무 많아 빌드가 실패했습니다. 게시물이 수천 개에 달하는 경우, getStaticPaths 사용하여 요청을 페이지별로 나누 page 및 per_page 거나, fallback: "blocking" 옵션을 가장 최근 게시물만 미리 렌더링하세요.

• 플러그인 업데이트 후 GraphQL 스키마 오류 발생: 플러그인을 추가하거나 제거할 때 WPGraphQL 스키마가 변경됩니다. WordPress 플러그인 변경 후 Apollo 클라이언트 캐시를 재생성하거나 로컬 스키마 스냅샷을 삭제하세요.

• 개발 환경에서 임시 게시글이 공개되는 문제: 사용하는 경우 status=any 만 요청하도록 하세요 status=publish. 임시 게시글이 공개적으로 표시되지 않도록 하려면 환경별 API 매개변수를 사용하십시오.

결론

Next.js를 WordPress와 함께 사용하면 확장 가능하고 SEO 친화적인 헤드리스 아키텍처를 구축할 수 있으며, 거의 모든 면에서 기존 WordPress보다 뛰어난 성능을 제공합니다.

콘텐츠 팀은 익숙한 WordPress 편집기를 계속 사용하고, 개발 팀은 최신 React 도구를 사용하여 구축합니다.

이 구성은 세 가지 구성 요소에 기반합니다. 헤드리스 CMS, 데이터 레이어인 REST API 또는 WPGraphQL, 그리고 모든 프런트엔드 렌더링 및 성능 최적화를 처리하는 Next.js입니다.

REST API로 시작하여 복잡성이 증가함에 따라 WPGraphQL을 도입하고, 사이트가 성숙해짐에 따라 ISR, 미리보기 모드 및 온디맨드 재검증 기능을 단계적으로 추가하세요. Next.js 프런트엔드는 Vercel에, WordPress는 전용 PHP 호스트에 배포하여 깔끔하고 프로덕션 환경에 적합한 분리 환경을 구축하세요.

이 조합은 더 이상 실험적인 것이 아닙니다. 주요 출판 플랫폼, 전자상거래 사이트 및 기업용 애플리케이션에 사용되고 있습니다. 관련 도구는 성숙했고, 커뮤니티는 활발하며, 성능 향상은 확실합니다. 지금이 바로 구축하기에 적절한 시기입니다.

Next.js를 사용한 워드프레스 헤드리스 사이트 관련 FAQ