nextjs wordpress
2.0.0
¡Es WordPress sin cabeza! ? - https://nextjswp.com
Esta es una aplicación Bare-Bones Next.js, que obtiene datos de WordPress a través de WPGRAPHQL y la estiliza con TailWindcss.
Considere un punto de partida para su próximo proyecto de WordPress sin cabeza.
¡Además, es muy, muy rápido!
git clone [email protected]:gregrickaby/nextjs-wordpress.gitnpm i.env.local cp .env.example .env.local Personalice las URL en .env.local para que coincida con su configuración de 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 Actualice la URL en next.config.js para que coincida con su sitio de WordPress:
/** @type {import('next').NextConfig} */
const nextConfig = {
images : {
remotePatterns : [
{
protocol : 'https' ,
hostname : '*.nextjswp.**' // <-- Change to your WordPress site
}
]
}
}
module . exports = nextConfig/lib/config.tsActualice el contenido para que coincida con su sitio de WordPress:
const config = {
siteName : 'Next.js WordPress' ,
siteDescription : "It's headless WordPress!" ,
siteUrl : 'https://nextjswp.com'
}Necesitará un sitio de WordPress local o público con los siguientes complementos:
Después de instalar todos los complementos mencionados anteriormente, deberá agregar algunas constantes a su archivo 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 ' );Para consultar el borrador de publicaciones para las vistas previas, deberá autenticarse con WordPress. El siguiente es un paso único:
wp-config.php y pegue la cadena en GRAPHQL_JWT_AUTH_SECRET_KEY Constant. (Asegúrese de desenchufar la constante eliminando los símbolos // ). // Optional. JWT auth refresh token.
define ( ' GRAPHQL_JWT_AUTH_SECRET_KEY ' , ' some-random-string-generated-by-wp-salt ' );your_username y your_password con sus credenciales de WordPress) mutation Login {
login (
input : {
clientMutationId : " uniqueId "
password : " your_password "
username : " your_username "
}
) {
refreshToken
}
}refreshToken devuelto por la mutación.env.local y pegue el refreshToken en la variable NEXTJS_AUTH_REFRESH_TOKEN . (Asegúrese de desenchufar la variable eliminando el símbolo # ). # Optional. JWT auth refresh token.
NEXTJS_AUTH_REFRESH_TOKEN="refresh-token-generated-by-grapqh-query"Ahora debería poder obtener una vista previa del borrador de publicaciones en su aplicación Next.js haciendo clic en el botón Vista previa en su administrador de WordPress.
npm run devUna vez que el servidor de desarrollo ha comenzado, puede ver el front-end: http: // localhost: 3000
GraphQL es eficiente porque podemos consultar múltiples puntos finales en una sola solicitud. Si tuviéramos que usar WordPress REST-API, necesitaríamos hacer múltiples viajes redondos a cada punto final respectivo.
Podemos construir nuestras consultas en Graphiql (o en su cliente REST favorito) y dejar que JSON.stringify() lo formatea. Debido a que todo esto es JavaScript estándar, incluso podemos pasar variables a nuestras consultas, ¡no hay necesidad de un paquete de terceros!
Aquí hay una consulta para obtener una sola publicación (basada en la babosa), la imagen destacada, meta del autor, categorías, etiquetas, SEO y comentarios de la publicación:
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
} Este repositorio no utiliza un paquete GraphQL de terceros, porque Next.js memoiza automáticamente las solicitudes de fetch() en nuestra función de Fetch personalizada. Esto significa que si obtenemos los mismos datos dos veces, Next.js solo hará una solicitud a WordPress.
Si prefiere usar un paquete GraphQL de terceros, simplemente cambie la función personalizada
fetchGraphQL()con el paquete de su elección.
Recuerde agregar todas las variables de entorno de .env.local a su entorno de producción en Vercely o Netlify.
RSS Feed y el mapa del sitio están disponibles en:
Las vistas previas están disponibles en:
¡Las contribuciones son bienvenidas! Consulte las pautas de contribución para obtener más información.
