Some docs on the next website and repo.
Note: Colby Fayock has a starter for a basic static blog using WPgraphQL with WP and Next, (next-wordpress-starter) here. There are notes form a James Quick video that walks through this below. There is another post that takes a deeper dive into this starter theme.
Keep it simple. See this article. Build hook very necessary. Can subdomain point to SG and domain point to Vercel? Could use headless WP instance and use static build.
Also Note: If you are looking for WooCommerce/WP/Next checkout Imran Sayed at Codeytek Academy. He has a older series here and at video 32 a newer theme starts in React/Next here. He has a “woo-next” starter on his repo. Brand new project started 8/22/21 here.
Why WordPress?
Actually love the WP editing experience especially when leveraging the WordPress mobile app. But I want to be able to use all the fun front-end technology make my site used all the latest and greatest bleeding edge of technology. I’m sure clients want the same thing.
Why a decoupled Front end?
Performance, update shopping cart without page reload. Static build, I’d you can go that route is lightning fast. Can have multiple front end UI (i.e., mobile app) using the same back-end.
Why not a decouple front-end?
Plugins is a bit of a mess. Need to host both. Bringing in second database or API? Need to mess with GraphQL. Who’s access to all those amazing WordPress functions like get post ID register nav bar if posts then do this. This may or may not be a bad thing just know that when you build a front end that is decoupled you’re relying on the data from the API only.
The Plugins Issue
This is only a thing when it comes to plugins that help you render the UI, or affect the front end. You can most definitely still use plugins things like smushed to compress images on upload advanced custom fields advanced custom post. WooCommerce plugin. What you cannot use obviously are page builders like elementor or a carousel slider for instance. I’d like to explore this more deeply but it does not mean that you lose major functionality. I’ve never been a huge fan of plugins anyway. You can also still leverage custom blocks I’m assuming. This is because although we don’t use a theme in the traditional sense we can still use a custom theme for the back end. For example we should be able to have a custom theme that allows us to maybe add some fields to the WordPress appearance customizer or custom block types.
It Looks Complicated
Page builder, custom theme, custom blocks, why bother just write some Php. As if ecommerce isn’t difficult enough you want to reinvent the Shopify wheel? Or as if using WooCommerce with a traditional theme wasn’t a pain in the ass enough we need to complicate that further.
“Magnificode” has 3 videos with 4+ hours of content. his headless Next showed you still need to use “local” for your local dev install of WordPress.
The “WPGraphQL” plugin seems to be the way to go for headless WP, also used a lot is WP GraphQL JWT plugin. Note: To add authentication to WPGraphQL, first you need to add the WPGraphQL JWT plugin to your WordPress Admin following the same process you used to add the WPGraphQL plugin.
Note that there is headless “WooCommerce” although I haven’t used WooCommerce at all yet.
Googling headless WP with next export and Colby Fayock and has an NextJS WP Starter Project.
Lots of videos on the subject. In addition to the ones already mentioned: WPCasts, James Perkins, Colby Fayock, James Quick, Kellen Mace, Etc.
Next.js with WordPress is for those who don’t really want to build the front-end in php, and ca still use WP as the back-end.
James Quick
Published 5/27/21 – 15min
Uses Colby Fayock Starter Theme (next-wordpress-starter) here.
If you clone and look at the package.json file you will see the apollo client is using graphQL to send requests. Reading the docs you will see you need need a “WordPress_GraphQL_Endpoint” set up in the “.env.local” file which we will grab from our deployed version of our WordPress instance.
Exploring a bit you will see inside of “src/pages/posts/posts.js” file we have a request being made inside a “getStaticProps” function. Pagination already built in. Grabs a series of posts and uses that build out a posts page.
We also have a dynamic route “src/pages/posts/page[slug].js” file
Install a WPGraphQL plugin inside WP admin and you get a new GraphQL option on the left sidebar. Click that and copy your GraphQL endoint. Paste this into the “.env.local” file.
This plugin allows GraphQL to sit on top of the built-in API of WP and adds GraphQL on top of it. Pretty cool we get an UI to work with GraphQL called Graphiql-ide to explore endpoints and what data is returned.
Go to posts > edges > node > title an click the play button to see a list of your posts titles
Run “npm install” and when that is complete, “npm run dev”
Should see the default skin, and behind the scenes this is doing a lot for you like default pages based on the slug, the sitemap.xml, the wp-search.json, the feed.xml
My instance worked, it pulled in some pages. The front-end is not responsive, never converts to a mobile menu.
Clients are familiar, or can easily become familiar with a WP backend.
Need to host the WP instance and the front-end. So we need to buy two domain names? How do we redirect users who go to the backend api?
A Closer Look at the “Next-Wordpress-Starter”
There is a plugins folder in the root. Files like “feed.js” and “sitemap.js” and few more.
The “feed.xml” and “sitemap.xml” are in the public folder with other files.
“netlify.toml” file which is needed if is hosted on Netlify.
Kellen Mace
Dude seems to know his shit. 2 hour detailed video here.
Example on Vercel GitHub
Speaking of starter projects, there is an WordPress example on Vercel’s Github here, along with 12+ other CMS examples, (including Sanity, Contentful, Strapi, and Prismic).
This starter has images and looks a little more mobile responsive.
Next Export to deploy a static site is great although not your only option.
In the “Magnificode” videos he uses “getServerSideProps” for using authorization with Next, (which scraps the ability to use next-export).