nextjs wordpress
2.0.0
Это без головы WordPress! ? - https://nextjswp.com
Это приложение Next.js, которое получает данные из WordPress через wpgraphQL и стилизирует его с помощью Tailwindcss.
Считайте это отправной точкой для вашего следующего безголового проекта WordPress.
Плюс это действительно очень быстро!
git clone [email protected]:gregrickaby/nextjs-wordpress.gitnpm i.env.local файл cp .env.example .env.local Настройте URL -адреса в .env.local , чтобы соответствовать вашей настройке 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 Обновите URL -адрес next.config.js , чтобы соответствовать вашему сайту WordPress:
/** @type {import('next').NextConfig} */
const nextConfig = {
images : {
remotePatterns : [
{
protocol : 'https' ,
hostname : '*.nextjswp.**' // <-- Change to your WordPress site
}
]
}
}
module . exports = nextConfig/lib/config.tsОбновите контент, чтобы соответствовать вашему сайту WordPress:
const config = {
siteName : 'Next.js WordPress' ,
siteDescription : "It's headless WordPress!" ,
siteUrl : 'https://nextjswp.com'
}Вам понадобится местный или общественный сайт WordPress со следующими плагинами:
После установки всех плагинов, упомянутых выше, вам нужно добавить некоторые константы в ваш файл 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 ' );Для того, чтобы запросить черновые посты для предварительных просмотров, вам необходимо пройти аутентификацию с WordPress. Ниже приведен единовременный шаг:
wp-config.php и вставьте строку в константу GRAPHQL_JWT_AUTH_SECRET_KEY . (Обязательно не понаблюдайте константу, удалив // символы.) // Optional. JWT auth refresh token.
define ( ' GRAPHQL_JWT_AUTH_SECRET_KEY ' , ' some-random-string-generated-by-wp-salt ' );your_username и your_password на свои учетные данные WordPress) mutation Login {
login (
input : {
clientMutationId : " uniqueId "
password : " your_password "
username : " your_username "
}
) {
refreshToken
}
}refreshToken возвращаемое мутацией.env.local и вставьте refreshToken в переменную NEXTJS_AUTH_REFRESH_TOKEN . (Обязательно понаблюдайте переменную, удалив символ # .) # Optional. JWT auth refresh token.
NEXTJS_AUTH_REFRESH_TOKEN="refresh-token-generated-by-grapqh-query"Теперь вы должны иметь возможность предварительно просмотреть проекты сообщений в вашем приложении Next.js, нажав кнопку предварительного просмотра в своем администраторе WordPress.
npm run devПосле начала Dev Server вы можете просмотреть фронт-конце: http: // localhost: 3000
GraphQL эффективен, потому что мы можем запросить несколько конечных точек в одном запросе. Если бы мы использовали WordPress Rest-API, нам нужно было бы совершить несколько круглых поездок в каждую соответствующую конечную точку.
Мы можем построить наши запросы в Graphiql (или вашего любимого клиента REST) и позволить JSON.stringify() форматировать его. Поскольку это все стандартное JavaScript, мы можем даже передать переменные в наши запросы- нет необходимости в стороннем пакете!
Вот запрос на то, чтобы принести единый пост (на основе слизняка), избранное изображение, автор Meta, категории, теги, SEO и комментарии:
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
} В этом репо не используется сторонний пакет GraphQL, потому что Next.js автоматически запоминает запросы fetch() в нашей пользовательской функции Fetch. Это означает, что если мы получим те же данные дважды, Next.js сделает только один запрос WordPress.
Если вы предпочитаете использовать сторонний пакет GraphQL, просто замените функцию пользовательской функции
fetchGraphQL()с пакетом по вашему выбору.
Не забудьте добавить все переменные среды от .env.local в вашу производственную среду в Vercel или NetLify.
RSS -канал и карта сайта доступны по адресу:
Предварительные просмотю доступны по адресу:
Взносы приветствуются! Пожалуйста, смотрите рекомендации для получения дополнительной информации.
