1

I am currently building a headless Next.js wordpress application using Vercel's example.

Currently testing in a local environment at http://localhost:3000 for Next.js and http://wordpress.test for Wordpress. So far it's working relatively well. I updated the preview link (preview_post_link) for wordpress to match the preview API endpoint in the Next.js application and updated Wordpress's site url to be point to my local Next.js environment.

Once the site url was updated the visit site,view post/page buttons now go to my Next.js app.

However, the problem I am having is that it also seems to have updated the save draft button. So now when I try to save the draft it tries to go to http://localhost:3000/wp-json/wp/v2/posts/38?_locale=user, my Next.js app and not Wordpress. Obviously because this link doesn't do anything in Next.js it throws an error.

Is this a bug in Wordpress? Or am I setting the headless URL incorrectly?

Setup

  • Wordpress version 6.1.1
  • Built my own theme

functions.php

<?php

add_filter( 'preview_post_link', 'the_preview_fix' );

function the_preview_fix($post) {
    $post = get_post();

    return home_url() . "/api/preview?secret=secret&id={$post->ID}";
}

Plugins

  • WPgraphQl version 1.14.0
  • WPGraphQL JWT Authentication version 0.4.0

Wordpress settings (No other settings have changed)

starball
  • 20,030
  • 7
  • 43
  • 238
Hides
  • 496
  • 1
  • 5
  • 15
  • **siteurl** should not be edited to point to a domain that is different from the domain used by WordPress. *siteurl* in the **wp_options** table is used internally by WordPress to know where to find the WordPress installation relative to the document root for the domain. By changing siteurl, WordPress cannot function properly. For example, when logged into WordPress as an admin user, the **visit site** and **view post/page** links point to pages that can provide administrative options. These links (and others generated via siteurl) were not intended to be directed to an external domain. – kofeigen Mar 16 '23 at 23:39
  • @kofeign so is this even possible? Could it not be done in the same domain? wordpress.test and admin.wordpress.test. – Hides Mar 17 '23 at 21:44
  • Remember that a subdomain such as `admin.wordpress.test` can point to a document root that is on a completely different server than the one used by `wordpress.test`. Using a subdomain can be equivalent to changing the host. So, WordPress would still be lost about where its files are located. I see the convenience of converting links like **Visit site**. But, doing so will break WordPress. – kofeigen Mar 17 '23 at 21:58
  • @fofeign I see, so this is only really possible on the same server, if wordpress is in a different subdirectory. Thank you. – Hides Mar 18 '23 at 18:24

1 Answers1

1

I figured it out! After some digging, with some guidence from ChatGPT I found this post which fixes exactly what I needed. Below is the code for anyone incase of broken link.

I am not aware though how this will affect anything else as there must be a reason why the Wordpress developers chose the REST API route to point to the frontend and not the backend system. For my purposes however this suits me well for now.

// change WordPress API URL to HOME URL
add_filter('rest_url', 'wptips_home_url_as_api_url');
function wptips_home_url_as_api_url($url) {
    $url = str_replace(home_url(),site_url() , $url);
    return $url;
}
Hides
  • 496
  • 1
  • 5
  • 15