Migrating a Company Website from Nuxt to Next.js and Headless WordPress

Website Preview

GitHub Repo

Backstory

In late 2022, we began updating the BDKinc website. Marketing provided the content, the Design Specialist created the visuals, and I led the technical build. Although I had other responsibilities, building our web presence was a passion project rooted in my background as a Web Developer/Designer.

Technical Decisions

The existing site used Nuxt with a Directus CMS, running in Docker with a Traefik proxy. I originally managed this single-server setup alone. As the company grew, we needed a scalable solution.

I switched from Nuxt to Next.js for several reasons:

• Industry Standard: React is more prevalent than Vue, making it easier to train employees.
• Features: SSR, the new App Directory, React Server Components.
• Deployment: Easy edge deployment via Vercel (the creators of Next.js).

The website preview runs on Vercel. Moving the frontend to the edge improved performance and enabled GitHub-based deployments, shifting proxy and web server responsibilities to the edge provider.

We retained Directus as the CMS but needed an upgrade. While I suggested other options, the marketing team preferred WordPress. We implemented headless WordPress, allowing us to use Next.js on the edge while giving content creators a familiar platform.

Long Term Strategy

Separating the frontend from the CMS facilitates integrations. For example:

• The “Meet the Team” page could pull employee data directly from Microsoft 365, updating in one place.
• Contact forms could funnel data directly into our CRM, streamlining the sales process.