nextjs wordpress
2.0.0
Ini WordPress tanpa kepala! ? - https://nextjswp.com
Ini adalah aplikasi Bare-Bones Next.js, yang mengambil data dari WordPress melalui WPGRAPHQL dan menata itu dengan tailwindcss.
Harap pertimbangkan itu titik awal untuk proyek WordPress tanpa kepala Anda berikutnya.
Ditambah itu benar -benar cepat!
git clone [email protected]:gregrickaby/nextjs-wordpress.gitnpm i.env.local cp .env.example .env.local Kustomisasi URL di .env.local untuk mencocokkan pengaturan WordPress Anda:
# 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 Perbarui URL di next.config.js untuk mencocokkan situs WordPress Anda:
/** @type {import('next').NextConfig} */
const nextConfig = {
images : {
remotePatterns : [
{
protocol : 'https' ,
hostname : '*.nextjswp.**' // <-- Change to your WordPress site
}
]
}
}
module . exports = nextConfig/lib/config.tsPerbarui konten agar sesuai dengan situs WordPress Anda:
const config = {
siteName : 'Next.js WordPress' ,
siteDescription : "It's headless WordPress!" ,
siteUrl : 'https://nextjswp.com'
}Anda membutuhkan situs WordPress lokal atau publik dengan plugin berikut:
Setelah menginstal semua plugin yang disebutkan di atas, Anda harus menambahkan beberapa konstanta ke file wp-config.php Anda:
// 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 ' );Untuk menanyakan kiriman draft untuk pratinjau, Anda harus mengotentikasi dengan WordPress. Berikut ini adalah langkah satu kali:
wp-config.php Anda, dan tempel string ke dalam GRAPHQL_JWT_AUTH_SECRET_KEY constant. (Pastikan untuk melepaskan konsom konstan dengan menghapus simbol // .) // Optional. JWT auth refresh token.
define ( ' GRAPHQL_JWT_AUTH_SECRET_KEY ' , ' some-random-string-generated-by-wp-salt ' );your_username dan your_password dengan kredensial WordPress Anda) mutation Login {
login (
input : {
clientMutationId : " uniqueId "
password : " your_password "
username : " your_username "
}
) {
refreshToken
}
}refreshToken yang dikembalikan oleh mutasiNEXTJS_AUTH_REFRESH_TOKEN refreshToken .env.local (Pastikan untuk melepaskan komentar variabel dengan menghapus simbol # .) # Optional. JWT auth refresh token.
NEXTJS_AUTH_REFRESH_TOKEN="refresh-token-generated-by-grapqh-query"Anda sekarang harus dapat mempratinjau draft posting di aplikasi berikutnya.js Anda dengan mengklik tombol Pratinjau di admin WordPress Anda.
npm run devSetelah server dev dimulai, Anda dapat melihat front-end: http: // localhost: 3000
GraphQL efisien karena kami dapat menanyakan beberapa titik akhir dalam satu permintaan. Jika kami menggunakan WordPress REST-API, kami perlu melakukan beberapa perjalanan pulang pergi ke masing-masing titik akhir.
Kami dapat membangun pertanyaan kami di GraphiQL (atau klien REST favorit Anda) dan membiarkan JSON.stringify() memformatnya. Karena ini semua JavaScript standar, kita bahkan dapat meneruskan variabel untuk pertanyaan kita- tidak perlu paket pihak ke-3!
Berikut adalah kueri untuk mengambil satu posting (berdasarkan siput), gambar unggulan, meta penulis, kategori, tag, SEO, dan komentar posting:
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 ini tidak menggunakan paket graphQL pihak ke -3, karena Next.js secara otomatis memoisasi permintaan fetch() dalam fungsi fetch khusus kami. Ini berarti bahwa jika kita mengambil data yang sama dua kali, Next.js hanya akan membuat satu permintaan ke WordPress.
Jika Anda lebih suka menggunakan paket graphql pihak ke -3, cukup ukalkan fungsi
fetchGraphQL()khusus dengan paket pilihan Anda.
Ingatlah untuk menambahkan semua variabel lingkungan dari .env.local ke lingkungan produksi Anda di Vercel atau Netlify.
RSS Feed dan Sitemap tersedia di:
Pratinjau tersedia di:
Kontribusi dipersilakan! Silakan lihat pedoman yang berkontribusi untuk informasi lebih lanjut.
