sjsinan.com: A Headless WordPress and Next.js Website

My own website had to do two jobs that usually pull against each other. It had to be fast and custom enough to prove what I build for clients, and it had to be easy to update, because I publish blog posts and case studies every week.

The first version was a fully hardcoded site. It was fast, but every new blog post, case study or price change meant editing code and deploying again. A normal WordPress theme would have fixed the editing problem, but it would have given up the speed, the custom design and the clean code that I want clients to see.

• Every content update needed a code change and a new deploy
• A theme-based site could not deliver the custom design and speed I wanted
• The site had to explain 16 services with clear, fixed prices
• Blog posts and case studies needed proper SEO and structured data from day one

I rebuilt the site as a headless website: WordPress stores the content, and a custom Next.js front end shows it to visitors. This is the same setup I now offer as a service.

WordPress only for content

WordPress runs on its own subdomain and holds the blog posts and case studies. Case studies use a custom post type with Advanced Custom Fields for the challenge, approach, result, tech stack and live link, so every case study has the same clean structure. Visitors never load WordPress directly.

A custom Next.js front end

The public site is built with Next.js, React and Tailwind CSS, with Framer Motion for smooth animations. It reads content from WordPress through WPGraphQL. I kept the original design when I moved the content into WordPress, so the site looks exactly as it did but is now far easier to update.

New content without a rebuild

Pages use Next.js Incremental Static Regeneration. Visitors get fast, ready-made pages, and when I publish or edit something in WordPress, the live page updates on its own within about a minute. No code change and no new deploy.

SEO built into every page

Every page has its own title, description and canonical URL. The site generates its sitemap automatically and adds structured data: BlogPosting for articles, FAQPage for every FAQ section, Service and Offer data for each service, and Person and WebSite data for the whole site. It also publishes an llms.txt file so AI search tools can read a clean summary of the site.

Services with clear, fixed prices

All 16 services and their packages come from one data file, so the services page, each service page, the sitemap and the chat assistant always show the same prices.

An AI assistant and working forms

A chat assistant built on the Google Gemini API answers visitor questions using the site’s real services, prices and FAQs, with rate limits to keep costs under control. The contact form sends messages through EmailJS, and blog comments go through WordPress moderation before they appear.

Fast hosting

The Next.js site runs as a Node.js app behind Cloudflare, and WordPress runs separately, so the public website stays fast even when the dashboard is busy.