nextjs wordpress
2.0.0
ヘッドレスワードプレスです！ ？ -https：//nextjswp.com
これは、barebones next.jsアプリであり、WPGRAPHQLを介してWordPressからデータを取得し、TailWindCSSでスタイルを付けます。
次のヘッドレスWordPressプロジェクトの出発点と考えてください。
さらに、それは本当に、本当に速いです！
git clone [email protected]:gregrickaby/nextjs-wordpress.gitnpm i.env.localファイルを作成しますcp .env.example .env.local WordPressのセットアップに一致するように、 .env.localでURLをカスタマイズします。
# 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を構成しますnext.config.jsでURLを更新して、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'
}次のプラグインを備えたローカルまたはパブリックワードプレスサイトが必要です。
上記のすべてのプラグインをインストールした後、 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で認証する必要があります。以下は1回限りのステップです。
wp-config.phpファイルを開き、文字列をGRAPHQL_JWT_AUTH_SECRET_KEY constantに貼り付けます。 （ //シンボルを削除して、必ず定数を除外してください。） // 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"WordPress管理者の[プレビュー]ボタンをクリックして、[次の.jsアプリ]アプリでドラフト投稿をプレビューできるようになりました。
npm run dev開発サーバーが開始されたら、フロントエンドを表示できます：http：// localhost：3000
GraphQLは、単一のリクエストで複数のエンドポイントを照会できるため、効率的です。 WordPress REST-APIを使用する場合は、それぞれのエンドポイントに複数の往復を行う必要があります。
GraphIQL（またはお気に入りのRESTクライアント）でクエリを作成し、 JSON.stringify()フォーマットすることができます。これはすべて標準のJavaScriptであるため、変数をクエリに渡すこともできます。サードパーティパッケージは必要ありません。
これは、単一の投稿（スラッグに基づく）、注目の画像、著者メタ、カテゴリ、タグ、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
} next.jsはカスタムfetch関数のfetch() requestを自動的にメモ化するため、このレポはサードパーティのgraphqlパッケージを使用しません。これは、同じデータを2回取得した場合、next.jsはWordPressに1つのリクエストのみを行うことを意味します。
サードパーティのGraphQLパッケージを使用する場合は、選択したパッケージでカスタム
fetchGraphQL()関数を交換するだけです。
.env.localからすべての環境変数をvercelまたはnetlifyの生産環境に追加することを忘れないでください。
RSSフィードとサイトマップは以下で利用できます。
プレビューは以下で利用できます。
貢献は大歓迎です！詳細については、貢献ガイドラインをご覧ください。
