# Kings Roofing NC: I didn't redesign the WordPress site — I lifted it to Next.js

Source: https://www.michaelchurley.com/blog/kingsroofingnc-pixel-perfect-wp-to-next-lift  
Published: 2026-08-08  
Author: Michael C. Hurley  
Tags: kingsroofingnc, wordpress-migration, nextjs, western-north-carolina, roofing, local-business, resend, vercel, martech, pixel-perfect

![Kings Roofing homepage hero. Green metal roof, Free Quote CTA](/blog/kingsroofingnc-pixel-perfect-wp-to-next-lift/screenshots/home.png)

## Who

I get hired when a contractor's site still works for referrals and dies for everyone else: plugins rotting, forms flaky, hosting bill arguing with the phone.

Kings Roofing already had a personality: orange `#FF7620`, leaping lion, metal-roof hero, color pickers, carport kits, Waynesville-to-Highlands location pages. Redesigning that into a generic "modern roofing" template would have trained half of Haywood County that the company changed crews.

This write-up is for operators who will keep the weird brand orange on purpose, and for WNC folks who just need the site to load when they search the truck wrap.

## What

Public repo [Hustle-Launch/kingsroofingnc.com](https://github.com/Hustle-Launch/kingsroofingnc.com). Package **0.1.0**, Bun, Next.js **16.1.6**, React 19, Tailwind 4.

Stack on HEAD: Resend for quote mail, PostHog, Sentry (`withSentryConfig` + CSP/HSTS/frame DENY), Phosphor via react-icons, Biome/Oxlint/tsgo local gates. No Stripe on `main`. A local branch has quote-fee experiments that never reached HEAD, so I am not narrating them as shipped.

![Residential services page](/blog/kingsroofingnc-pixel-perfect-wp-to-next-lift/screenshots/residential.png)

What actually shipped:

- Pixel-faithful homepage: Residential & Commercial hero, Free Quote / Call box, New Roof Installation with YouTube embed, Re-Roofing orange band, Roof Repair checklist, four location photo cards, "Roofers in Asheville NC" closer.
- App Router pages matching the old WordPress menu: About, Residential, Commercial, Contact, Roofing Color Pickers (metal + shingles), Metal Structures (carport kits + pole truss kits + style detail pages).
- Location SEO under `/residential/[location]` for Asheville, Cashiers, Highlands, Waynesville. Constants consolidated so phone numbers do not drift.
- Contact + feedback flows: Resend from `notify@uncap.us` to `kingshaywood@gmail.com`, HTML escaped in templates, interactive star rating + loading skeleton from launch week.
- Ops: Vercel prebuilt / Blacksmith path, git auto-deploy off on main, Aug 8 `X-Robots-Tag: index, follow`.

Honesty: sitemap still lists legacy `/waynesville` style URLs while the app moved under `/residential/...`. Custom domain `kingsroofingnc.com` returns Cloudflare **526** from pack hosts. The working surface is the Vercel alias.

![Roofing color pickers](/blog/kingsroofingnc-pixel-perfect-wp-to-next-lift/screenshots/color-pickers.png)

## Where

Working product: [kingsroofingnccom.vercel.app](https://kingsroofingnccom.vercel.app). Intended apex `kingsroofingnc.com` is DNS/SSL-incomplete at draft time.

Code: Hustle-Launch (public; michaelmonetized mirror shares HEAD `984746b`). Host Vercel. Business phones in constants: **828-246-2193** / **828-279-6896**. Service area string spans Asheville through Weaverville.

![Metal structures hub](/blog/kingsroofingnc-pixel-perfect-wp-to-next-lift/screenshots/metal-structures.png)

## When

**2026-02-12.** One long day. Create Next App to WP migration scaffold to Layout/Providers to exact copy to full sitemap pages to move locations under `/residential/[location]` to dropdowns for locations / metal structures / color pickers to white/orange restyle to lion + dark footer to lock Roboto/Poppins/#FF7620 to YouTube to "match WordPress exactly" commits. That afternoon is the product.

**2026-02-15.** Escape user input in Resend HTML so quote mail is not an XSS souvenir.

**2026-02-21.** Launch-week hygiene: README that is not boilerplate, LOCATIONS single source, star rating + skeleton, Phosphor icons, ContactCTA extract, carport/pole-truss content fleshed out, phone consolidation + `rel=noopener`.

**2026-02-27–28.** Build gate, drop GitHub Actions (Vercel is CI), P1 fixes, security headers folded into `next.config.ts`.

**2026-05.** shipprep / Blacksmith observability dance: install, revert, re-apply.

**2026-08-08.** HEAD `984746b`. Robots index/follow on Vercel. Thirty-two commits on the clock.

## Why

Referral businesses do not buy your taste. They buy continuity.

I kept the orange, the lion, the color pickers, and the metal-structure tree because those were already the marketing system. Next.js, Resend, Sentry, and CSP are the parts that were rotting under WordPress, not the brand.

When you migrate a referral-driven local business off WordPress, do you keep the weird brand orange, or do you "modernize" it until nobody recognizes the truck wrap?