nextjs wordpress
2.0.0
إنه مقطوع الرأس WordPress! ؟ - https://nextjswp.com
هذا هو تطبيق 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'
}ستحتاج إما إلى موقع محلي أو عام ووردبريس مع الإضافات التالية:
بعد تثبيت جميع الإضافات المذكورة أعلاه ، ستحتاج إلى إضافة بعض الثوابت إلى ملف 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"يجب أن تكون قادرًا الآن على معاينة مشاركات مسودة في تطبيق Next.js الخاص بك بالنقر فوق زر المعاينة في مسؤول WordPress الخاص بك.
npm run devبمجرد بدء تشغيل خادم DEV ، يمكنك عرض الواجهة الأمامية: http: // localhost: 3000
GraphQL فعال لأنه يمكننا الاستعلام عن نقاط نهاية متعددة في طلب واحد. إذا أردنا استخدام WordPress REST-API ، فسوف نحتاج إلى القيام برحلات مستديرة متعددة إلى كل نقطة النهاية المعنية.
يمكننا إنشاء استفساراتنا في GraphIQL (أو عميل REST المفضل لديك) والسماح JSON.stringify() بتنسيقه. لأن هذا كله هو JavaScript القياسي ، يمكننا حتى نقل المتغيرات إلى استفساراتنا- لا حاجة لحزمة الطرف الثالث!
فيما يلي استعلام لجلب منشور واحد (استنادًا إلى Slug) ، والصورة المميزة ، والميتما المؤلف ، والفئات ، والعلامات ، وكبار المسئولين الاقتصاديين ، و Post Comments:
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() في وظيفة الجلب المخصصة الخاصة بنا. هذا يعني أنه إذا جلبنا نفس البيانات مرتين ، فإن Next.js ستقدم طلبًا واحدًا فقط إلى WordPress.
إذا كنت تفضل استخدام حزمة GraphQL من طرف ثالث ، فما عليك سوى تبديل وظيفة
fetchGraphQL()المخصصة مع حزمة اختيارك.
تذكر أن تضيف جميع متغيرات البيئة من .env.local إلى بيئة الإنتاج الخاصة بك على Vercel أو NetLify.
تتوفر تغذية RSS و Sitemap على:
المعاينات متوفرة على:
المساهمات مرحب بها! يرجى الاطلاع على المبادئ التوجيهية المساهمة لمزيد من المعلومات.
