It's headless WordPress! 💀 - https://nextjswp.com This is a bare-bones Next.js app, which fetches data from WordPress via WPGraphQL and styles it with TailwindCSS. Please consider it a starting point for your next headless WordPress project.
Customize the URLs in .env.local to match your WordPress setup:
# 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"
4. Configure next.config.js
Update the URL in next.config.js to match your WordPress site:
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: '*.nextjswp.**' // <-- Change this to your WordPress site
}
]
}
}
5. Configure /lib/config.ts
Open /lib/config.ts and update the content to match your WordPress site:
After installing all the plugins mentioned above, you'll need to add some constants to your wp-config.php file:
// 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' );
Permalinks
Finally, set your permalink structure to /blog/%postname%/ in Settings -> Permalinks.
7. Optional. Authentication for Previews
In order to query draft posts for Previews, you'll need to authenticate with WordPress. The following is a one-time step:
GraphQL is efficient because we can query multiple endpoints in a single request. If we were to use the WordPress REST-API, we would need to make multiple round trips to each respective endpoint. We can build our queries in GraphiQL (or your favorite REST client) and let JSON.stringify() format it. Because this is all standard JavaScript, we can even pass variables to our queries-- no need for a 3rd party package! Here is a query to fetch a single post (based on the slug), the featured image, author meta, categories, tags, SEO, and post comments:
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
}
This repo does not use a 3rd party GraphQL package, because Next.js automatically memoizes the fetch() requests in our custom fetch function. This means that if we fetch the same data twice, Next.js will only make one request to WordPress.
If you prefer use a 3rd party GraphQL package, simply swap out the custom fetchGraphQL() function with the package of your choosing.
Going To Production
Remember to add all the environment variables from .env.local to your production environment on Vercel or Netlify.
