nextjs wordpress
2.0.0
C'est WordPress sans tête! ? - https://nextjswp.com
Ceci est une application nue Next.js, qui récupère les données de WordPress via WPGraphQL et les styles avec TailwindCSS.
Veuillez le considérer comme un point de départ pour votre prochain projet WordPress sans tête.
De plus, c'est vraiment, très rapide!
git clone [email protected]:gregrickaby/nextjs-wordpress.gitnpm i.env.local cp .env.example .env.local Personnalisez les URL dans .env.local pour correspondre à votre configuration 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 Mettez à jour l'URL dans next.config.js pour correspondre à votre site WordPress:
/** @type {import('next').NextConfig} */
const nextConfig = {
images : {
remotePatterns : [
{
protocol : 'https' ,
hostname : '*.nextjswp.**' // <-- Change to your WordPress site
}
]
}
}
module . exports = nextConfig/lib/config.tsMettez à jour le contenu pour correspondre à votre site WordPress:
const config = {
siteName : 'Next.js WordPress' ,
siteDescription : "It's headless WordPress!" ,
siteUrl : 'https://nextjswp.com'
}Vous aurez besoin d'un site WordPress local ou public avec les plugins suivants:
Après avoir installé tous les plugins mentionnés ci-dessus, vous devrez ajouter des constantes à votre fichier 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 ' );Afin de remettre en question le projet de messages pour les aperçus, vous devrez vous authentifier avec WordPress. Ce qui suit est une étape unique:
wp-config.php et collez la chaîne dans la constante GRAPHQL_JWT_AUTH_SECRET_KEY . (Assurez-vous de décommenter la constante en supprimant les symboles // .) // Optional. JWT auth refresh token.
define ( ' GRAPHQL_JWT_AUTH_SECRET_KEY ' , ' some-random-string-generated-by-wp-salt ' );your_username et your_password par vos informations d'identification WordPress) mutation Login {
login (
input : {
clientMutationId : " uniqueId "
password : " your_password "
username : " your_username "
}
) {
refreshToken
}
}refreshToken renvoyé par la mutation.env.local et collez le refreshToken dans la variable NEXTJS_AUTH_REFRESH_TOKEN . (Assurez-vous de décommenter la variable en supprimant le symbole # .) # Optional. JWT auth refresh token.
NEXTJS_AUTH_REFRESH_TOKEN="refresh-token-generated-by-grapqh-query"Vous devriez désormais être en mesure de prévisualiser les articles sur votre application Next.js en cliquant sur le bouton Aperçu de votre administrateur WordPress.
npm run devUne fois que le serveur de développement a commencé, vous pouvez afficher le frontal: http: // localhost: 3000
GraphQL est efficace car nous pouvons interroger plusieurs points de terminaison dans une seule demande. Si nous devions utiliser le WordPress REST-API, nous aurions besoin de faire plusieurs aller-retour à chaque point de terminaison respectif.
Nous pouvons construire nos requêtes dans Graphiql (ou votre client de repos préféré) et laisser JSON.stringify() le formater. Parce que tout cela est JavaScript standard, nous pouvons même transmettre des variables à nos requêtes - pas besoin d'un package tiers!
Voici une requête pour récupérer un seul post (basé sur la limace), l'image en vedette, les méta-méta, les catégories, les balises, le référencement et les commentaires de publication:
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
} Ce dépôt n'utilise pas un package GraphQL tiers, car Next.js mémorise automatiquement les demandes fetch() dans notre fonction de fetch personnalisée. Cela signifie que si nous récupérons deux fois les mêmes données, Next.js ne fera qu'une seule demande à WordPress.
Si vous préférez utiliser un package GraphQL tiers, échangez simplement la fonction
fetchGraphQL()personnalisée avec le package de votre choix.
N'oubliez pas d'ajouter toutes les variables d'environnement de .env.local à votre environnement de production sur Vercel ou Netlify.
RSS Feed et le site du site sont disponibles sur:
Des aperçus sont disponibles à:
Les contributions sont les bienvenues! Veuillez consulter les directives contributives pour plus d'informations.
