oddevan / oddevan-next

oddEvan.com but with next.js

Next.js WordPress Starter

WebDevStudios fork of the official Next.js WordPress Example. Used as a starter for headless WordPress projects.

👉 https://nextjs-wordpress-starter.vercel.app

🗂 Table of Contents

• 🎓 Preface
• 🚀 Getting Started
• 🔧 WordPress Info (The Backend)
• 💻 Workflow
  • Local by Flywheel
  • Deployments
  • Git Branches
  • Git Workflow
  • Credentials
• Contributing

---

🎓 Preface

You will need the following installed on your computer:

• Node 12+
• NPM 6+
• Yarn

The following frontend technologies are used on this project:

• Next.js
• TailwindCSS
• Prettier
• ESLint
• PostCSS
• PropTypes

The backend (WordPress) is running WPGraphQL. So familiarity with writing GraphQL queries is helpful, but not required.

---

🚀 Getting Started

The following instructions will standup a local install of the frontend (Next.js). It queries data from the backend (WordPress) via GraphQL. Authentication happens via environment variable .env.local.

Clone the repo:

git clone [e-mail]:WebDevStudios/nextjs-wordpress-starter.git

Install dependencies:

yarn

Create an environment variable file:

cp .env.local.example .env.local

The environment variable credentials are in: 1password --> Next.js Environment Variables. Copy & paste those credentials into .env.local

Start the development server:

yarn dev

The frontend is now available at http://localhost:3000

---

🔧 WordPress Info (The Backend)

The backend is a vanilla WordPress install, hosted at WP Engine with the following plugins which are managed via Composer.

Advanced Custom Fields Pro - ACF handles custom post meta and ACF Blocks.

Custom Post Type UI - Register custom post types through the WordPress dashboard.

reSmush.it Image Optimizer - Keeps image sizes small by optimizing them on upload.

WDS SSO - Our internal single-sign on service.

WP GraphQL - GraphQL is installed and the endpoint is: https://nextjs.wpengine.com/graphql.

WP GraphiQL - Use WP GraphiQL to build queries in the WordPress Dashboard. Those queries can be copied and pasted right into /lib/api.js

WP GraphQL ACF - Gives the option to expose ACF fields in GraphQL.

WP GraphQL Custom Post Type UI - Expose CPTUI data to GraphQL.

WP GraphQL Gutenberg - Expose Block (Gutenberg) data to GraphQL.

WP GraphQL JWT - Allows the frontend to talk to the backend via environment variable .env.local.

WP GraphQL Yoast - Exposes Yoast SEO settings in GraphQL.

WP Migrate DB Pro - Used for moving database and files between environments.

There is no frontend for WordPress - But it is running wd_s which houses /acf-json and other functions for building ACF Blocks.

---

💻 Workflow

Contributing to this project is a lot like any other WDS project...

Local by Flywheel

There is an Local export available. Simply import the .zip file and you can tinker with the WordPress backend.

Deployments

Vercel is connected to this repo and handles builds and deployments.

Git Branches

• main - auto deploys
• Pull Requests - deployment previews are automatically generated by Vercel

Git Workflow

1. Create a feature branch off main
2. Open a draft Pull Request on Github
3. When finished with your work, fill out the PR template and publish your PR
4. Vercel will create a deployment preview. It must pass and deploy successfully
5. After peer review, PR will be merged back into main
6. Repeat ♻️

Credentials

• WordPress - 1password --> "Next.js on WPE"
• Environment Variable - 1password --> "Next.js Environment Variables"
• To view hosting dashboards, ping Greg

Contributing

Your contributions and issues are welcome.