Create a vercel account if you don’t have any.
\nThen create a new project with CMS WordPress
\nConnect it with your github
\nIt’d create the project like this: https:\/\/github.com\/advcha\/isr-blog-nextjs-wordpress
\nA WordPress backend with NextJS frontend
\nRead the github project README<\/p>\n
PREPARE THE WP BACKEND
\nPrepare your local WP site. Mine is http:\/\/wp-commerce.test\/
\nThen on the WP admin, install a new plugin WPGraphQL
\nThen on GraphQL settings, look at the GraphQL Endpoint value. The default value is http:\/\/wp-commerce.test\/graphql
\nTHIS WOULD BE THE ‘WORDPRESS_API_URL’ VALUE<\/p>\n
PREPARE THE NEXTJS FRONTEND
\nClone the above github (https:\/\/github.com\/advcha\/isr-blog-nextjs-wordpress) to your computer
\nThen copy .env.local.example to .env.local
\nModify WORDPRESS_API_URL value TO http:\/\/wp-commerce.test\/
\nAlso need to modify next.config.js file TO add a domain ‘0.gravatar.com’ like this<\/p>\n
module.exports = {\r\n images: {\r\n remotePatterns: [\r\n {\r\n protocol: protocol.slice(0, -1),\r\n hostname,\r\n port,\r\n pathname: `${pathname}\/**`,\r\n },\r\n ],\r\n domains: ['0.gravatar.com','secure.gravatar.com'],\r\n },\r\n};<\/pre>\nI need to do this (add the domain for showing up the images above), because previously I got this error on the frontend<\/p>\n
Server Error\r\nError: 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`\r\nSee more info: https:\/\/nextjs.org\/docs\/messages\/next-image-unconfigured-host<\/pre>\nAlso I need to update my ‘node’ to > 18… version. I update it to version 20…
\nRun the npm or yarn on the project root (\/home\/satria\/Documents\/projects\/isr-blog-nextjs-wordpress\/). I prefer yarn<\/p>\n
yarn install\r\nyarn dev<\/pre>\nIf there is no error, open it on the browser: http:\/\/localhost:3000\/<\/p>\n
DEPLOY IT VIA VERCEL
\nLogin to your vercel account then go to your project. Mine is isr-blog-nextjs-wordpress
\nThen go to Settings -> Environment Variables -> Create a new one ‘WORDPRESS_API_URL’ or modify it
\nThe value should be http:\/\/wp-commerce.test\/graphql
\nThen Save<\/p>\n
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<\/p>\n
Add to your environment variables WORDPRESS_API_URL.<\/pre>\nMake sure the variable WORDPRESS_API_URL value in .env.local file is same with in the vercel project setting.
\nThat’s because my WordPress is still on my local computer. So use your live WordPress site and install again WPGraphQL plugin !
\nAnother error on build deploy via vercel<\/p>\n
SyntaxError: Unexpected token < in JSON at position 0<\/pre>\nTHIS IS BECAUSE THE NEXT JS (FRONTEND) NOT LIVE YET?
\nREAD: https:\/\/github.com\/vercel\/next.js\/issues\/47554<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading “WordPress Headless with Vercel”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[60,107],"tags":[],"class_list":["post-11485","post","type-post","status-publish","format-standard","hentry","category-node","category-wordpress-2"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/11485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=11485"}],"version-history":[{"count":7,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/11485\/revisions"}],"predecessor-version":[{"id":11492,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/11485\/revisions\/11492"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=11485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=11485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=11485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}