nextjs wordpress
2.0.0
這是無頭的WordPress！ ？ -https：//nextjswp.com
這是一個裸露的next.js應用程序，它通過wpgraphql從WordPress獲取數據，並使用tailwindcss對其進行了樣式。
請將其視為下一個無頭WordPress項目的起點。
另外，這真的非常快！
git clone [email protected]:gregrickaby/nextjs-wordpress.gitnpm i.env.local文件cp .env.example .env.local在.env.local中自定義URL以匹配您的WordPress設置：
# 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在next.config.js中更新URL以匹配您的WordPress網站：
/** @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 contents中。 （請確保通過刪除//符號來散佈常數。） // Optional. JWT auth refresh token.
define ( ' GRAPHQL_JWT_AUTH_SECRET_KEY ' , ' some-random-string-generated-by-wp-salt ' );your_username和your_password ） mutation Login {
login (
input : {
clientMutationId : " uniqueId "
password : " your_password "
username : " your_username "
}
) {
refreshToken
}
}refreshToken返回的更新.env.local文件，然後將refreshToken粘貼到NEXTJS_AUTH_REFRESH_TOKEN變量中。 （請確保通過刪除#符號來散佈變量。） # Optional. JWT auth refresh token.
NEXTJS_AUTH_REFRESH_TOKEN="refresh-token-generated-by-grapqh-query"現在，您應該能夠通過單擊WordPress管理員中的“預覽”按鈕來預覽下一個。
npm run dev開發服務器啟動後，您可以查看前端：http：// localhost：3000
GraphQL是有效的，因為我們可以在單個請求中查詢多個端點。如果我們要使用WordPress REST-API，則需要對每個端點進行多次往返。
我們可以在GraphIQL（或您喜歡的REST客戶端）中構建查詢，然後讓JSON.stringify()格式化它。因為這是所有標準的JavaScript，所以我們甚至可以將變量傳遞給我們的查詢 - 不需要第三方套餐！
這是獲取單個帖子（基於slug）的查詢，特色圖像，作者元，類別，標籤，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
}此存儲庫不使用第三方GraphQl軟件包，因為Next.js會在我們的自定義fetch函數中自動記憶fetch()請求。這意味著，如果我們兩次獲取相同的數據，則Next.js只會向WordPress提出一個請求。
如果您希望使用第三方GraphQl軟件包，只需將自定義
fetchGraphQL()函數與您選擇的軟件包交換。
請記住，將所有環境變量從.env.local添加到Vercel或Netlify上的生產環境。
RSS feed和站點地圖可用：
預覽可用：
歡迎捐款！請參閱貢獻指南以獲取更多信息。
