Create a vercel account if you don’t have any.
Then create a new project with CMS WordPress
Connect it with your github
It’d create the project like this: https://github.com/advcha/isr-blog-nextjs-wordpress
A WordPress backend with NextJS frontend
Read the github project README
PREPARE THE WP BACKEND
Prepare your local WP site. Mine is http://wp-commerce.test/
Then on the WP admin, install a new plugin WPGraphQL
Then on GraphQL settings, look at the GraphQL Endpoint value. The default value is http://wp-commerce.test/graphql
THIS WOULD BE THE ‘WORDPRESS_API_URL’ VALUE
PREPARE THE NEXTJS FRONTEND
Clone the above github (https://github.com/advcha/isr-blog-nextjs-wordpress) to your computer
Then copy .env.local.example to .env.local
Modify WORDPRESS_API_URL value TO http://wp-commerce.test/
Also need to modify next.config.js file TO add a domain ‘0.gravatar.com’ like this
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
module.exports = { images: { remotePatterns: [ { protocol: protocol.slice(0, -1), hostname, port, pathname: `${pathname}/**`, }, ], domains: ['0.gravatar.com','secure.gravatar.com'], }, }; |
I need to do this (add the domain for showing up the images above), because previously I got this error on the frontend
|
1 2 3 |
Server Error Error: Invalid src prop (http://0.gravatar.com/avatar/033d77f8305477da85f8eaac6c8a600d?s=96&d=mm&r=g) on `next/image`, hostname "0.gravatar.com" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host |
Also I need to update my ‘node’ to > 18… version. I update it to version 20…
Run the npm or yarn on the project root (/home/satria/Documents/projects/isr-blog-nextjs-wordpress/). I prefer yarn
|
1 2 |
yarn install yarn dev |
If there is no error, open it on the browser: http://localhost:3000/
DEPLOY IT VIA VERCEL
Login to your vercel account then go to your project. Mine is isr-blog-nextjs-wordpress
Then go to Settings -> Environment Variables -> Create a new one ‘WORDPRESS_API_URL’ or modify it
The value should be http://wp-commerce.test/graphql
Then Save
Push the changes on the github. but when you want to deploy on the vercel (https://vercel.com/satria-faesthas-projects/isr-blog-nextjs-wordpress/deployments), you’d get this error and deploy is failed
|
1 |
Add to your environment variables WORDPRESS_API_URL. |
Make sure the variable WORDPRESS_API_URL value in .env.local file is same with in the vercel project setting.
That’s because my WordPress is still on my local computer. So use your live WordPress site and install again WPGraphQL plugin !
Another error on build deploy via vercel
|
1 |
SyntaxError: Unexpected token < in JSON at position 0 |
THIS IS BECAUSE THE NEXT JS (FRONTEND) NOT LIVE YET?
READ: https://github.com/vercel/next.js/issues/47554