Mary A Hayne - Portfolio

Headless WordPress / NextJS Theme I have been a fan of the headless CMS since it first became a "thing", and built a headless theme years ago with Express Server. That theme enabled custom page templates and I wanted to replicate that functionality.

On countless WordPress sites, I have managed and updated an exploding number of plugins, themes, and files, ever watchful for potential security vulnerabilities. Older sites can be challenging to update and maintain.

WordPress has always been a platform to me, probably because I have used it predominantly for sites rather than for blogging. Without using the functionality that delivers the user interface to the browser (and all the security risks therein), what remains a lean, mean content-entry and delivery machine, with unmatched flexibility.

All coincides with the burgeoning popularity of libraries like React and statically generated sites, not to mention the increasing need for optimization, performance, and security.

Learn Javascript deeply.
— Matt Mullenweg, Creator of WordPress

This project is built on WordPress with React, NextJS, Typescript, and GraphQL. Local development was set up with Docker and the front end was bootstrapped with create-next-app.

My Requirements

Built it from scratch
Keep it boilerplate - minimal styles - customizable
Integrate Flexible content ACF page Templates
TailwindCSS - utilize this utility-first style system for the first time
Archive pages that allow page data

Process

I was excited to take a deep dive into the new features in NextJS 14, which introduces the app router and server component.

Post: Server Components 101

For the ACF page templates, I was able to leverage them from my old project, along with all the layouts - sections, tabs, columns, and cards.

Leaving the posts page setting unset in WordPress, I created the Blog page with some introductory content. Then, inside the Blog page template, I fetched the posts. I had done this in WordPress in PHP by implementing the WP_Loop after the page content. Unfortunately, in Next this generated 500 errors on deploy/build/serve. I believe this was caused by the nested data fetching occuring on a page earmarked to be statically rendered. This was solved by using Next's const dyamic = 'force-dynamic' setting.

Tech Stack

WordPress
Docker - for local development
NextJS v14+
Typescript
GraphQL
TailwindCSS
@tailwindcss/typography - adds styles for generated content
image-size - gets image sizes from files

Repository & Further Detail

You can see how I solved these issues in the Github repo