nextjs wordpress
2.0.0
มันเป็น WordPress ที่ไม่มีหัว! - - https://nextjswp.com
นี่คือแอป Bare Bones Next.js ซึ่งดึงข้อมูลจาก WordPress ผ่าน WPGRAPHQL และสไตล์ด้วย tailwindcss
โปรดพิจารณาเป็นจุดเริ่มต้นสำหรับโครงการ WordPress ที่ไม่มีหัวต่อไปของคุณ
นอกจากนี้ยังเร็วจริงๆ!
git clone [email protected]:gregrickaby/nextjs-wordpress.gitnpm i.env.local cp .env.example .env.local ปรับแต่ง URL ใน .env.local เพื่อให้ตรงกับการตั้งค่า 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 อัปเดต URL ใน next.config.js เพื่อให้ตรงกับไซต์ 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 (ตรวจสอบให้แน่ใจว่าไม่ต้องใส่ใจค่าคงที่โดยการลบสัญลักษณ์ // ) // 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 และวาง refreshToken ลงในตัวแปร NEXTJS_AUTH_REFRESH_TOKEN (ตรวจสอบให้แน่ใจว่าไม่สามารถยกเลิกการสร้างตัวแปรได้โดยการลบสัญลักษณ์ # ) # Optional. JWT auth refresh token.
NEXTJS_AUTH_REFRESH_TOKEN="refresh-token-generated-by-grapqh-query"ตอนนี้คุณควรสามารถดูตัวอย่างโพสต์ร่างในแอปถัดไปของคุณได้โดยคลิกที่ปุ่ม ดูตัวอย่าง ในผู้ดูแลระบบ WordPress ของคุณ
npm run devเมื่อเซิร์ฟเวอร์ dev เริ่มต้นแล้วคุณสามารถดู front-end: http: // localhost: 3000
GraphQL มีประสิทธิภาพเนื่องจากเราสามารถสืบค้นจุดสิ้นสุดหลายจุดในคำขอเดียว หากเราต้องใช้ WordPress Rest-API เราจะต้องทำการเดินทางรอบหลายรอบไปยังจุดสิ้นสุดแต่ละจุด
เราสามารถสร้างแบบสอบถามของเราใน graphiql (หรือไคลเอนต์ REST ที่คุณชื่นชอบ) และให้ JSON.stringify() จัดรูปแบบ เนื่องจากนี่คือจาวาสคริปต์มาตรฐานทั้งหมดเราจึงสามารถส่งต่อตัวแปรไปยังการสืบค้นของเรา- ไม่จำเป็นต้องมีแพ็คเกจบุคคลที่สาม!
นี่คือการสืบค้นเพื่อดึงโพสต์เดียว (ขึ้นอยู่กับกระสุน), ภาพที่โดดเด่น, เมตาผู้แต่ง, หมวดหมู่, แท็ก, 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 ของบุคคลที่สามเนื่องจาก next.js บันทึกการร้องขอ fetch() โดยอัตโนมัติในฟังก์ชั่นการดึงข้อมูลที่กำหนดเองของเรา ซึ่งหมายความว่าถ้าเราดึงข้อมูลเดียวกันสองครั้งถัดไป js จะทำการร้องขอหนึ่งครั้งกับ WordPress
หากคุณต้องการใช้แพ็คเกจ GraphQl บุคคลที่สามเพียงแค่สลับฟังก์ชั่น
fetchGraphQL()ที่กำหนดเองออกมาพร้อมกับแพ็คเกจที่คุณเลือก
อย่าลืมเพิ่มตัวแปรสภาพแวดล้อมทั้งหมดจาก .env.local ไปยังสภาพแวดล้อมการผลิตของคุณใน vercel หรือ netlify
ฟีด RSS และแผนผังไซต์มีอยู่ที่:
ดูตัวอย่างได้ที่:
ยินดีต้อนรับ! โปรดดูแนวทางการสนับสนุนสำหรับข้อมูลเพิ่มเติม
