nextjs wordpress
2.0.0
É WordPress sem cabeça! ? - https://nextjswp.com
Este é um aplicativo Bare Bones Next.js, que busca dados do WordPress via wpgraphql e o estiliza com o TailWindcss.
Por favor, considere um ponto de partida para o seu próximo projeto WordPress sem cabeça.
Além disso, é muito, muito rápido!
git clone [email protected]:gregrickaby/nextjs-wordpress.gitnpm i.env.local cp .env.example .env.local Personalize os URLs em .env.local para corresponder à sua configuração do 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 Atualize o URL em next.config.js para corresponder ao seu site WordPress:
/** @type {import('next').NextConfig} */
const nextConfig = {
images : {
remotePatterns : [
{
protocol : 'https' ,
hostname : '*.nextjswp.**' // <-- Change to your WordPress site
}
]
}
}
module . exports = nextConfig/lib/config.tsAtualize o conteúdo para corresponder ao seu site WordPress:
const config = {
siteName : 'Next.js WordPress' ,
siteDescription : "It's headless WordPress!" ,
siteUrl : 'https://nextjswp.com'
}Você precisará de um site local ou público do WordPress com os seguintes plugins:
Depois de instalar todos os plugins mencionados acima, você precisará adicionar algumas constantes ao seu arquivo 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 as postagens de rascunho para visualizações, você precisará autenticar com o WordPress. A seguir é uma etapa única:
wp-config.php e cole a string na constante GRAPHQL_JWT_AUTH_SECRET_KEY . (Certifique -se de descomentar a constante removendo os // símbolos.) // Optional. JWT auth refresh token.
define ( ' GRAPHQL_JWT_AUTH_SECRET_KEY ' , ' some-random-string-generated-by-wp-salt ' );your_username e your_password pelas suas credenciais do WordPress) mutation Login {
login (
input : {
clientMutationId : " uniqueId "
password : " your_password "
username : " your_username "
}
) {
refreshToken
}
}refreshToken retornado pela mutação.env.local e cole a refreshToken na variável NEXTJS_AUTH_REFRESH_TOKEN . (Certifique -se de descomentar a variável removendo o símbolo # .) # Optional. JWT auth refresh token.
NEXTJS_AUTH_REFRESH_TOKEN="refresh-token-generated-by-grapqh-query"Agora você deve poder visualizar as postagens de rascunho no seu aplicativo Next.js clicando no botão Visualizar no seu administrador do WordPress.
npm run devDepois que o servidor de desenvolvimento começar, você pode ver o front-end: http: // localhost: 3000
O GraphQL é eficiente porque podemos consultar vários pontos de extremidade em uma única solicitação. Se usássemos o WordPress Rest-api, precisaríamos fazer várias viagens de ida e volta para cada ponto de extremidade respectiva.
Podemos criar nossas consultas no GraphIQL (ou seu cliente de repouso favorito) e deixar JSON.stringify() formatá -lo. Como tudo isso é JavaScript padrão, podemos até passar variáveis para nossas consultas- não há necessidade de um pacote de terceiros!
Aqui está uma consulta para buscar um único post (baseado na lesma), a imagem em destaque, o autor meta, categorias, tags, SEO e postagem comentários:
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 repositório não usa um pacote de grafql de terceiros, porque o Next.js memoriza automaticamente as solicitações fetch() em nossa função de busca personalizada. Isso significa que, se buscarmos os mesmos dados duas vezes, o Next.js fará apenas uma solicitação ao WordPress.
Se você preferir usar um pacote de grafql de terceiros, basta trocar a função
fetchGraphQL()personalizada com o pacote de sua escolha.
Lembre -se de adicionar todas as variáveis de ambiente de .env.local ao seu ambiente de produção no vercel ou netlify.
RSS Feed e o Sitemap estão disponíveis em:
As visualizações estão disponíveis em:
As contribuições são bem -vindas! Consulte as diretrizes contribuintes para obter mais informações.
