nextjs wordpress
2.0.0
Es ist kopfloser WordPress! ? - https://nextjswp.com
Dies ist eine Bare-Bones Next.js-App, die Daten von WordPress über WPGRAPHQL abruft und sie mit Tailwindcss stilft.
Bitte betrachten Sie es für einen Ausgangspunkt für Ihr nächstes Headless WordPress -Projekt.
Außerdem ist es wirklich sehr schnell!
git clone [email protected]:gregrickaby/nextjs-wordpress.gitnpm i.env.local -Datei cp .env.example .env.local Passen Sie die URLs in .env.local an, um Ihrem WordPress -Setup zu entsprechen:
# 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 Aktualisieren Sie die URL in next.config.js , um Ihrer WordPress -Site zu entsprechen:
/** @type {import('next').NextConfig} */
const nextConfig = {
images : {
remotePatterns : [
{
protocol : 'https' ,
hostname : '*.nextjswp.**' // <-- Change to your WordPress site
}
]
}
}
module . exports = nextConfig/lib/config.tsAktualisieren Sie den Inhalt so, dass er Ihrer WordPress -Site entspricht:
const config = {
siteName : 'Next.js WordPress' ,
siteDescription : "It's headless WordPress!" ,
siteUrl : 'https://nextjswp.com'
}Sie benötigen entweder eine lokale oder öffentliche WordPress -Site mit den folgenden Plugins:
Nachdem Sie alle oben genannten Plugins installiert haben, müssen Sie einige Konstanten zu Ihrer Datei wp-config.php hinzufügen:
// 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 ' );Um Beiträge für Voransichten abzufragen, müssen Sie sich mit WordPress authentifizieren. Das Folgende ist ein einmaliger Schritt:
wp-config.php und fügen Sie die Zeichenfolge in die Konstante GRAPHQL_JWT_AUTH_SECRET_KEY ein. (Achten Sie darauf, die Konstante zu entfernen, indem Sie die // entfernen.) // Optional. JWT auth refresh token.
define ( ' GRAPHQL_JWT_AUTH_SECRET_KEY ' , ' some-random-string-generated-by-wp-salt ' );your_username und your_password durch Ihre WordPress -Anmeldeinformationen). mutation Login {
login (
input : {
clientMutationId : " uniqueId "
password : " your_password "
username : " your_username "
}
) {
refreshToken
}
}refreshTokenNEXTJS_AUTH_REFRESH_TOKEN refreshToken nächste .env.local (Achten Sie darauf, die Variable zu entfernen, indem Sie das # Symbol entfernen.) # Optional. JWT auth refresh token.
NEXTJS_AUTH_REFRESH_TOKEN="refresh-token-generated-by-grapqh-query"Sie sollten nun in der Lage sein, den Entwurf von Beiträgen in Ihrer nächsten.js -App zu melden, indem Sie in Ihrem WordPress -Administrator auf die Schaltfläche Vorschau klicken.
npm run devSobald der Dev-Server begonnen hat, können Sie das Front-End anzeigen: http: // localhost: 3000
GraphQL ist effizient, da wir mehrere Endpunkte in einer einzelnen Anforderung abfragen können. Wenn wir das WordPress Rest-API verwenden würden, müssten wir mehrere Rundenfahrten zu jedem jeweiligen Endpunkt unternehmen.
Wir können unsere Abfragen in Graphiql (oder Ihrem bevorzugten REST -Kunden) erstellen und JSON.stringify() formatieren lassen. Da dies alles Standard-JavaScript ist, können wir sogar Variablen an unsere Fragen übergeben- kein Drittanbieterpaket!
Hier ist eine Abfrage zum Abrufen eines einzelnen Beitrags (basierend auf der Schnecke), dem vorgestellten Bild-, Autor -Meta-, Kategorien-, Tags-, SEO- und Posten -Kommentare:
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
} Dieses Repo verwendet kein GraphQL -Paket von Drittanbietern, da Next.js die fetch() -Anfragen in unserer benutzerdefinierten Fetch -Funktion automatisch merkt. Dies bedeutet, dass, wenn wir dieselben Daten zweimal holen, als nächstes.js nur eine Anfrage an WordPress stellt.
Wenn Sie es vorziehen, ein GraphQL -Paket von Drittanbietern zu verwenden, tauschen Sie einfach die benutzerdefinierte
fetchGraphQL()-Funktion mit dem Paket Ihrer Auswahl aus.
Denken Sie daran, alle Umgebungsvariablen von .env.local zu Ihrer Produktionsumgebung auf Vercel oder Netlify hinzuzufügen.
RSS -Feed und die Sitemap sind erhältlich unter:
Voransichten sind verfügbar unter:
Beiträge sind willkommen! Weitere Informationen finden Sie in den beitragenden Richtlinien.
