NextJS + Headless WordPress = My Blazing Fast New Website

Two weeks ago I set myself on an intense journey of learning new technologies. There had been a couple of things that I had been putting off in my professional career and I really wanted to dig in and launch something interesting.

I wanted to build a new website and platform for me to talk about the cool stuff I’m doing. ( Duh )

How I wanted to challenge myself

  • Learn how to create a server side rendered react application ( NextJS )
  • Learn how to integrate Headless CMS into the server side rendered application. ( WordPress )
  • Host all of it using a cloud hosting platform. ( Digital Ocean )
  • Build it as performant as possible.

In my career I’ve been forged by the weekly turn around. My first development job was slinging weekly advertisements for Best Buy and I got into a really great cadence of building something Monday – Thursday and leaving Friday as a day of test.

Since then I’ve really been forged by Google’s Design Sprint which follows roughly the same cadence but forces you to test with your users.

When I encounter a project with new technology I like to break it into two sprints:

Week 1 — Education Crash Course

In the first sprint I attempt to create small ( day-long ) projects to try to fill in all of my deficiencies.  This way when I get into the actual building I have a working example to base any new problems off of.

First I create a small list of projects. For this one I had two pet projects that I would then merge into a single ( third ) project.

This also allows me to play around with some of the technologies and determine if some of my initial assumptions are correct.

The first project was to figure out Server Side Rendered  ( SSR ) React.

Thankfully NextJS has some amazing tutorials that allow you to quickly run through a small application that connects to an example API.

After a couple of hours I felt like I had a handle on this so I jumped into my second project – Headless CMS’s.

I played around with Drupal, Contenful and a few other options but ultimately landed on WordPress for my own site so that I could become more familiar with it. My expertise really lies in Front End Development and Digital Strategy, as long as the API is returning what I want then I’m groovy with whatever. I feel like if I become more familiar with Headless WordPress there would probably be a better market to pitch it as an actual product — but we’ll see.

Once I had the two example projects I merged them together and had the first version one of my website.

Week 2 – Design, Development and Launching!

With all of the pieces in front of me all I had to do was put them together.

I focused on three of the following things:

  • Performance
  • Accessibility
  • SEO

This leaves out some of the things I really find exciting about the Front End space which includes creating really fancy experiences, elegant microinteractions and all sorts of other wizzbang explosions that come with being a Front End Developer — but I wanted to create a really solid foundation for a site and then launch it in a relatively short amount of time — all of the fancy stuff can come later.

Launching the site was also kind of problematic — I don’t really have the patience to wait around for DNS propagation. This also compounds with the fact that when you have a decoupled CMS you have to launch two sites — kind of sucks, but at least the two launches are smaller!

How did I do?

I frequently get page loads in less then 1 second on desktop and in less then 2 seconds on mobile with a 3G connection — that’s pretty slick — and since it’s a server side rendered single page application the page transitions are super fast — so subsequent pages are even faster!

Running the lighthouse audit on my site frequently yields the following scores ( out of 100 )

  • Performance ( 96 – 100 )
  • Accessibility ( 100 )
  • SEO ( 100 )
  • Best Practices ( 88 – 92 )

You can run this test yourself by following the steps outlined at developers.google.com/web/tools/lighthouse. It’s a pretty slick tool and really digs into issues that you can fix for yourself.

What can I do next?

There’s always items that you leave on the table when you’re working against tight timelines. I’m probably going to put this site on the back burner for a couple of weeks to see how the analytics run on it — but here are the next items that I want to build out:

  • Some stylistic tweaks, mainly dealing with typography as I post new things
  • Contact Form
  • Email Signup Form
  • More advanced social sharing
  • More interesting page interactions ( without sacrificing performance)

Next Project?

This was also a pet project that might feed into another product that I’ve had in my head for awhile. So we’ll have to see what my next sprint yields!

About the Author

Headshot of Mathias Rechtzigel with some sweet lazers in the background. Like the type you would find in a cheesy Sears photoshoot. Yeah those ones.

Mathias Rechtzigel is a web creator, his skills range from development, design, user experience and sometimes content creation.

He lives in Minneapolis, Minnesota with his partner (Ellen), dog (Bard), and two cats ( Pippi & Misti ).

Connect with me on

Join me on my journey

Sign up and I'll send you a weekly email with links to my posts, and other valuable links that I find througout the week.