nextjs wordpress
2.0.0
헤드리스 워드 프레스입니다! ? -https://nextjswp.com
이것은 Bare-Bones Next.js 앱으로 WPGRAPHQL을 통해 WordPress의 데이터를 가져오고 TailWindcss와 스타일을 사용합니다.
다음 Headless WordPress 프로젝트의 출발점을 고려하십시오.
게다가 정말 빠릅니다!
git clone [email protected]:gregrickaby/nextjs-wordpress.gitnpm i.env.local 파일을 만듭니다 cp .env.example .env.local WordPress 설정과 일치하도록 .env.local 에서 URL을 사용자 정의하십시오.
# WordPress GraphQL API URL. No trailing slash.
NEXT_PUBLIC_WORDPRESS_GRAPHQL_URL="https://blog.nextjswp.com/graphql"
# WordPress REST API URL. No trailing slash.
NEXT_PUBLIC_WORDPRESS_REST_API_URL="https://blog.nextjswp.com/wp-json/wp/v2"
# Optional. JWT auth refresh token.
#NEXTJS_AUTH_REFRESH_TOKEN=""
# Preview Secret. Must match the constant in wp-config.php.
NEXTJS_PREVIEW_SECRET="preview"
# Revalidation Secret. Must match the constant in wp-config.php.
NEXTJS_REVALIDATION_SECRET="revalidate"next.config.js 를 구성하십시오 WordPress 사이트와 일치하도록 next.config.js 에서 URL을 업데이트하십시오.
/** @type {import('next').NextConfig} */
const nextConfig = {
images : {
remotePatterns : [
{
protocol : 'https' ,
hostname : '*.nextjswp.**' // <-- Change to your WordPress site
}
]
}
}
module . exports = nextConfig/lib/config.ts 구성WordPress 사이트와 일치하도록 콘텐츠를 업데이트하십시오.
const config = {
siteName : 'Next.js WordPress' ,
siteDescription : "It's headless WordPress!" ,
siteUrl : 'https://nextjswp.com'
}다음 플러그인이있는 로컬 또는 공개 WordPress 사이트가 필요합니다.
위에서 언급 한 모든 플러그인을 설치 한 후에는 wp-config.php 파일에 상수를 추가해야합니다.
// The URL of your Next.js frontend. Include the trailing slash.
define ( ' NEXTJS_FRONTEND_URL ' , ' https://nextjswp.com/ ' );
// Optional. JWT auth refresh token.
//define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', '' );
// Any random string. This must match the .env variable in the Next.js frontend.
define ( ' NEXTJS_PREVIEW_SECRET ' , ' preview ' );
// Any random string. This must match the .env variable in the Next.js frontend.
define ( ' NEXTJS_REVALIDATION_SECRET ' , ' revalidate ' );미리보기의 초안 게시물을 쿼리하려면 WordPress로 인증해야합니다. 다음은 일회성 단계입니다.
wp-config.php 파일을 열고 문자열을 GRAPHQL_JWT_AUTH_SECRET_KEY 상수에 붙여 넣습니다. ( // 기호를 제거하여 상수를 무너 뜨리십시오.) // Optional. JWT auth refresh token.
define ( ' GRAPHQL_JWT_AUTH_SECRET_KEY ' , ' some-random-string-generated-by-wp-salt ' );your_username 및 your_password WordPress 자격 증명으로 바꾸십시오) 붙여 넣으십시오. mutation Login {
login (
input : {
clientMutationId : " uniqueId "
password : " your_password "
username : " your_username "
}
) {
refreshToken
}
}refreshToken 복사하십시오.env.local 파일을 열고 NEXTJS_AUTH_REFRESH_TOKEN 변수에 refreshToken 붙여 넣습니다. ( # 기호를 제거하여 변수를 결우하십시오.) # Optional. JWT auth refresh token.
NEXTJS_AUTH_REFRESH_TOKEN="refresh-token-generated-by-grapqh-query"이제 WordPress Admin에서 미리보기 버튼을 클릭하여 다음.js 앱에서 초안 게시물을 미리 볼 수 있어야합니다.
npm run dev개발자 서버가 시작되면 프론트 엔드를 볼 수 있습니다 : http : // localhost : 3000
GraphQL은 단일 요청에서 여러 엔드 포인트를 쿼리 할 수 있으므로 효율적입니다. WordPress Rest-Api를 사용하려면 각각 각각의 각 엔드 포인트를 여러 개의 라운드 트립해야합니다.
GraphIQL (또는 좋아하는 REST 클라이언트)에서 쿼리를 빌드하고 JSON.stringify() 를 형식화 할 수 있습니다. 이것은 모든 표준 JavaScript이기 때문에 변수를 쿼리로 전달할 수도 있습니다. 타사 패키지가 필요하지 않습니다!
다음은 단일 게시물 (슬러그 기반), 특집 이미지, 저자 메타, 카테고리, 태그, SEO 및 게시물을 가져 오는 쿼리입니다.
import { Post } from '@/lib/types'
/**
* Fetch a single post by slug.
*/
export async function getPostBySlug ( slug : string ) {
// Define our query.
const query = `
query GetPost($slug: ID!) {
post(id: $slug, idType: SLUG) {
databaseId
content(format: RENDERED)
title(format: RENDERED)
featuredImage {
node {
altText
mediaDetails {
sizes(include: MEDIUM) {
height
width
sourceUrl
}
}
}
}
author {
node {
avatar {
url
}
name
}
}
date
tags {
nodes {
databaseId
name
}
}
categories {
nodes {
databaseId
name
}
}
seo {
metaDesc
title
}
comments(first: 30, where: {order: ASC}) {
nodes {
content(format: RENDERED)
databaseId
date
status
author {
node {
avatar {
url
}
email
name
url
}
}
}
}
}
}
`
// Define our variables.
const variables = {
slug : slug
}
// Fetch the data using a reusable fetch function. Next.js
// automatically memoizes and caches these requests.
const response = await fetchGraphQL ( query , variables )
// Return the post.
return response . data . post as Post
} 이 repo는 타사 GraphQL 패키지를 사용하지 않습니다. JS는 사용자 정의 Fetch 함수에서 fetch() 요청을 자동으로 메모 화합니다. 이것은 우리가 동일한 데이터를 두 번 가져 오면 다음 .js는 WordPress에 한 번만 요청할 것임을 의미합니다.
제 3 자 GraphQL 패키지를 선호하는 경우 사용자 정의
fetchGraphQL()함수를 선택한 패키지로 교체하십시오.
.env.local 에서 vercel 또는 netlify의 생산 환경에 모든 환경 변수를 추가하십시오.
RSS 피드 및 사이트 맵은 다음과 같습니다.
미리보기는 다음에서 사용할 수 있습니다.
기부금을 환영합니다! 자세한 내용은 기고 가이드 라인을 참조하십시오.
