We use cookies to understand how you interact with our site, to personalize and streamline your experience, and to tailor advertising. By continuing to use our site, you accept our use of cookies and accept our Privacy Policy.
Contact Us
Contact Us
Sign in
Sign in
Nexcess Logo

GatsbyJS vs. NextJS for Your Headless WordPress Site

September 29, 2022


Comparing GatsbyJS vs. NextJS for Your Headless WordPress Site


People have used WordPress to build websites for a while now, but WordPress has had its limitations in the past. The headless WordPress trend has solved many of these shortcomings and has created a more developer-friendly experience. In addition, a headless WordPress site can improve site performance and security.


What is Headless WordPress?


Headless WordPress means you are “decoupling” the front end and back end of your website. Think of the backend as all of the data and content your site stores, such as blog posts, page content, website settings, and anything else your site may contain. The front end is how all of this information is presented to the user.

In this article, we’ll be focusing on the options available for headless WordPress sites, but you can read more in-depth about the topic of in the Headless WordPress: What Is It? article.

How Does a Headless WordPress Site Work?

Headless WordPress provides your content as data using a Representational State Transfer (REST) Application Programming Interface (API). You can access your content by sending a network request to the built-in REST API endpoint in WordPress. This solution provides freedom to present all of your content usinga custom front end.

What are the Cons of a Headless WordPress Site?

Headless WordPress sites are more complex to maintain and build. These complexities make them a more expensive. There is a cost-benefit tradeoff analysis to be made when considering a headless WordPress site, given the extra financial costs involved.

Headless WordPress: What Is It?


Some advantages are more flexibility in the development of the website, faster loading times, and higher security. Downsides? You’ll need to know multiple programming languages since JavaScript will power the front end. Also, more maintenance could be required, again leading to the fact that a somewhat experienced developer would be required to get it working properly.

Overview of GatsbyJS vs. NextJS


You can technically build the front end of your headless WordPress site however you’d like, but two highly popular frameworks can speed up the development process and offer features to make your site even better. These two options are GatsbyJS and NextJS.

About GatsbyJS

GatsbyJS is a static site generator framework built in React. Its most significant selling points are that it is insanely fast, it is easy to get started with, and it provides the developer with plenty of tooling to build out complex features.

GatsbyJS has excellent documentation, but, in addition, the Nexcess team has also created an easy-to-follow guide on How to Use GatsbyJS with Your WordPress Site.

Some GatsbyJS-built website examples include those for Affirm, ReactJS Docs, and Little Caesars.

About NextJS

The other popular framework is NextJS. NextJS has seen massive growth over the past couple of years. The React community has gotten behind the framework, which only continues to improve. It’s geared towards creating a site that is easy to develop and deploy to production without complications.

NextJS falls under the “Jamstack” umbrella, essentially using JavaScript, APIs, and HTML markup to build a website. For example, when building a headless WordPress site with NextJS, the JavaScript would be NextJS/React, the APIs would consist of WordPress’s REST API or the WPGraphQL plugin, and the HTML would be how the markup is displayed on the screen.

One significant advantage of using NextJS with your WordPress site is that you’re not limited to only a statically generated website. Although you’ll still see the most speed and SEO benefits from a statically served page, there are instances where you’ll want to load parts of your website dynamically. NextJS makes it easy to take advantage of both features, allowing you to make the most of a Jamstack-style website while leveraging the benefits of a server-side rendered site.

Some NextJS-built website examples include those for Hulu, IGN, and the Netflix Careers website.

All-in-One WordPress Solutions


Getting Started with NextJS


Now that we’ve covered the benefits of using NextJS let’s take a look at how easy it is to start building a headless WordPress site with a NextJS front end.

Step #1: Set Up Your WordPress site

First, you’ll want to have a WordPress website set up to serve the data. This website can be an existing site, or you can create a new one. You can check out Managed WordPress Hosting by Nexcess for a quick and easy way to set up a WordPress site.

Step #2: Install & Configure WPGraphQL

We'll use GraphQL instead of WordPress’s Rest API in this example. Doing so makes it easy to get started right away with our chosen framework. First log in to your WordPress site and install the WPGraphQL plugin. This free, open-source plugin can be installed in the WordPress Admin Dashboard:

Install and configure WPGraphQL



Once that plugin is installed, you should see a new setting tab in the left sidebar titled GraphQL. This functionality will open up a playground inside your WordPress Admin Dashboard that you can use to run different queries. You can also verify it’s working by going to the “yoursite.com/graphql” URL. You should get an error message indicating that the query needs at least one of the two required parameters. This message means the WPGraphQL endpoint is working as expected.

Step #3: Create a NextJS App

You’ll need to have a basic understanding of the command line to get started with NextJS and have Node installed. Open your CLI tool of choice and navigate wherever you want to install NextJS onto your machine. Once you’re in the directory you’d like, enter:

npx create-next-app@latest


Enter your project name when prompted, then hit enter. NextJS should then work its magic and install all of the necessary dependencies. Once that’s finished, change to the app’s directory using:

cd your-app-name


Then, you can start your app with:

npm run dev


You should be able to see the NextJS starter site in your browser at this point. Now, let’s get your WordPress content to show up.

Step #4: Basic NextJS Configuration

As a basic example, we’re going to create a homepage with the titles of our posts. These next steps will give a broad overview, but you can follow a more detailed example in this WP Casts video, “Getting Started with Headless WordPress with NextJS & WPGraphQL if needed.

Open the 'pages/index.js' file in the code editor of your choice. You should see the code for the default NextJS starter page. Go ahead and delete all the code inside the 'Home' function. Then underneath, create a new exported function called 'getStaticProps()'. This function is a NextJS-specific function, so it needs to follow the same name. Your code should look like this:

Then underneath, create a new exported function called 'getStaticProps()'.


Step #5: Get Data from WordPress

Now that we have our NextJS app running, we’ll want to populate it with the content from our WordPress site. To do this, we’ll utilize the Fetch API. First, we’ll create a GraphQL query that will get the slug, content, and title of each post on the site. This example below is what the code will look like inside our function:

Now that we have our NextJS app running, we’ll want to populate it with the content from our WordPress site.



You can play around with different queries in your WordPress Admin Dashboard using the GraphQL IDE.

Once we have the query we need, we’ll return that data in an object which we can then pass to our Home function using props:

Once we have the query we need, we’ll return that data in an object which we can then pass to our Home function using props.



Taking this action will now output a list of all the titles of posts to your NextJS homepage. And just like that, your WordPress site is hooked up to your NextJS app!

Where you go from here is entirely up to you. You can create queries to get post content, create links, add images, and add any other content to your site. The official WPGraphQL Docs are an excellent resource for learning how to work with GraphQL and figuring out how to pull WordPress data into your site. There are also NextJS GitHub examples showing actual production code on the Vercel/NextJS GitHub.

Wrapping Up


As mentioned above, the GatsbyJS vs. NextJS argument mostly comes down to what is most important in the site you’re building. They’re both really fast frameworks with tons of tools and features. However, if you know some pages or posts will require server-side rendered content, or if you’re looking for a solid front-end framework for your WordPress site, NextJS is a great choice.

Consider Managed Hosting with Nexcess


Although you can host your NextJS front end on Vercel, you’ll still need hosting for your WordPress site and data. Managed WordPress Hosting with Nexcess is the perfect choice to power your headless WordPress site. Your site will be blazing fast and easy to set up with fully managed hosting. Make the most of that added front-end speed by using a top-tier web host like Nexcess. And with 24/7 support, you can rest assured knowing you’ll have the Nexcess team to help you with any step of the process.


Managed hosting is a service where the hosting provider carries out all of the administration, setup, and maintenance and offers an excellent customer support service. If anything goes wrong with your WordPress managed hosting, the service provider will fix all the problems as quickly as possible, so your WordPress site is kept up and running correctly.

Nexcess offers a wide variety of managed hosting packages and a constantly growing superb Nexcess Knowledge Base. Consider managed hosting with Nexcess!

Fully Managed Hosting Plans with Nexcess


Nexcess Managed Hosting
offers you faster speeds, more robust security, inherent scalability, and trusted support. Once your website is ready to go live, consider our stellar hosting plans:

Plugin Performance Monitor — Test Your WordPress Plugins Automatically


Don’t let changes to your website slow you down. The Nexcess Plugin Performance Monitor watches your site hourly, so you don’t just see the problem - you know how to fix it.

Why Choose Nexcess?


Because we are different! Chris Lema captures "the why" in his passionate and stirring recount of a Nexcess support-related story.


Why Your Hosting Provider Matters

We’ve optimized hosting for the industry’s leading commerce and content platforms. That means speed, security, scalability and support are built in. Backed by free migrations and 30-day money-back guarantee, let us show you why we’re the best.

No one optimizes hosting for open-source applications better than Nexcess!



Recent Articles

Related Articles

Colten Van Tussenbrook
Colten Van Tussenbrook


Colten is a Front End Developer still clinging onto his English degree and writing when he can. When he's not writing code or writing about code, he's usually fishing, playing golf, or doing something outside in the Utah mountains.