Say what? Why would I want to use Next.js for the front end for a WordPress website? I’ve already covered a couple of ways to do a single site WordPress – using React or Vue that work just fine. Why “headless”? Why complicate things?
Believe it or not, there are plenty of reasons to use a framework such as Next.js to power the front end of your WordPress site. I’m working on my brother-in-law’s blog using this exact combo. My reasons? 1) Server side rendering 2) Security 3) and it’s React.
So we have an WordPress blog, with years worth of data in search engines. We don’t want to get rid of this by making it a pure client side solution. SEO for client side content is still not worth the gamble.
Like I mentioned, I do have previous solutions using React and Vue for WordPress, but these are all client side. Meaning, the data on the page is fetched (through AJAX) – after the page is loaded. They’re single page applications which, from last I heard is not optimal for SEO.
We want all the data on the page loaded loaded right from the get go – without any client side fetching. And that’s what Next offers.
This one might be a little trivial and tricky. See – the existing WordPress site is already running. Naturally, we want the front end to use the current domain, and the API backend (which is the current WordPress site) will have a new “endpoint”.
For a more secure site using the “Headless CMS” architecture, we will have to hide where the back end is really living. Since there are no client side calls, the requests to the REST API is all done behind the scenes. This way, a user that visits the site, cannot really tell where the data lives. They cannot see how to get to the admin area – or if its even a WordPress site at all! The front end seems like its just a collection of static HTML pages. And that’s what I like about the Next approach.
Now I say tricky because that means I have to replace all references to the images and static resources. I cannot use relative paths – because it won’t resolve – the new domain doesn’t have the “wp-content” directory!
So I still have to see how this can be achieved.
React by far is the most popular choice for developers at the time of writing. And I can see why. I pick Next.js framework to be the front end for my new project for this same reason as well.
So far, So good?
I can’t really tell just yet.
Props and State? Well, state is not really used – but props? Easy. For each component there is a function called getServerSideProps which sets up all of the data that can be accessed through props. Reminds me of componentDidMount in regular React.
Well is it a good choice?