Migrating from WordPress to Next.js 16 — NR Caps Case Study

# Migrating from WordPress to Next.js 16 — NR Caps Case Study

NR Caps came to us with a problem that's painfully common: their WordPress website was slow, hard to maintain, and couldn't support the custom features they needed. Eighteen months later, they're running on Next.js 16 with a custom 3D product configurator, real-time pricing engine, and page loads under 1.5 seconds.

This is the full story of that migration — the technical decisions, the pitfalls, and the measurable business impact.

The Starting Point: WordPress Pain

NR Caps had been running on WordPress with WooCommerce for three years. On paper, it worked. In practice:

• **Page load times averaged 6-8 seconds** on mobile. Their product pages were bloated with unoptimized images, render-blocking scripts from 14 different plugins, and a theme that loaded 400KB of CSS on every page.
• **Plugin conflicts** were a monthly nightmare. Updating one plugin would break another. Their developer spent 10+ hours per month just keeping things running.
• **No custom configurator**. Customers had to describe their cap designs via email or phone. The quoting process took 24-48 hours because someone had to manually calculate pricing based on embroidery complexity, cap style, quantity breaks, and material choices.
• **Mobile experience was terrible**. The theme was "responsive" in the loosest sense — elements overlapped, the checkout flow was 7 pages long, and the cart abandoned rate was over 70%.
• **SEO was stagnant**. Despite running Yoast SEO, their Core Web Vitals were deep in the red. Google Search Console showed declining impressions month over month.

The final straw was when a plugin update took the site down for 6 hours on a Friday afternoon — their busiest inquiry day.

Why Next.js 16 (and Not Shopify)

The obvious question everyone asks: why not just move to Shopify?

We evaluated Shopify, Webflow, and a headless WordPress setup before recommending Next.js. The decision came down to three factors:

1. Custom Product Configurator NR Caps needed a 3D configurator where customers could select cap style, colors, materials, add logos, choose embroidery thread colors, and see a real-time price update. Shopify's product customization options are limited to dropdowns and text fields. Building a truly custom configurator on Shopify requires Hydrogen (their React framework) anyway — at which point you're basically building a Next.js app with extra steps.

2. Complex Pricing Logic Cap pricing isn't simple. It depends on: - Base cap style (20+ options) - Quantity (with non-linear price breaks at 50, 100, 250, 500, 1000+) - Embroidery locations (front, back, sides — each priced separately) - Stitch count per location - Special techniques (3D puff, appliqué, tone-on-tone) - Material upgrades - Packaging customization

This pricing matrix has over 10,000 possible combinations. On WordPress, this was a spreadsheet that someone manually consulted. We needed it automated and instant.

3. Performance Requirements NR Caps' customers are primarily B2B — wholesale buyers, brand managers, event coordinators. These users are often on corporate networks, sometimes in rural areas, frequently on mobile. Every second of load time costs conversions.

Next.js gave us server-side rendering, automatic code splitting, image optimization, and edge deployment out of the box.

The Migration Strategy

We didn't do a big-bang migration. Instead, we ran both sites in parallel for 6 weeks:

Phase 1: Core Pages (Weeks 1-2) Built the marketing pages first — homepage, about, services, contact. This let us establish the design system, component library, and deployment pipeline without touching any business logic.

• **Tech choices made here:**
• **Tailwind CSS 4** for styling — utility-first, zero unused CSS in production
• **Framer Motion** for animations — smooth, performant, GPU-accelerated
• **MDX** for content — marketing team can edit without developer involvement

Phase 2: Product Catalog (Weeks 3-4) Migrated the product catalog from WooCommerce to a custom data layer:

// Product type with full configurator support
interface CapProduct {
  id: string
  slug: string
  name: string
  basePrice: number
  styles: CapStyle[]
  materials: Material[]
  embroideryOptions: EmbroideryConfig
  quantityBreaks: PriceBreak[]
  images: ProductImage[]    // Multiple angles
  models?: ThreeDModel[]     // For 3D configurator
}

We built a custom admin panel for NR Caps to manage products without needing a developer. It's a simple React app that writes to their database — no WordPress admin complexity.

Phase 3: Configurator & Pricing Engine (Weeks 4-6) The centerpiece feature. The 3D configurator lets customers:

1. Select a cap style from a visual grid 2. Choose colors with a real-time 3D preview 3. Upload logos and position them on the cap 4. Select embroidery options (thread colors, techniques) 5. Set quantity and see instant pricing 6. Submit a quote request with all specifications attached

The pricing engine runs entirely on the client side with server-side validation:

function calculatePrice(config: CapConfiguration): PriceBreakdown {

// Apply embroidery pricing for (const location of config.embroideryLocations) { const stitchCost = calculateStitchCost( location.stitchCount, location.technique ) basePrice += stitchCost }

// Apply quantity breaks const quantityMultiplier = getQuantityBreak( config.quantity, config.style.quantityBreaks )

return { unitPrice: basePrice * quantityMultiplier, totalPrice: basePrice quantityMultiplier config.quantity, breakdown: generateBreakdown(config), } } `

Phase 4: SEO Migration (Week 6) This is where many migrations fail. We handled it carefully:

• **301 redirects** for every old URL to its new equivalent
• **Canonical tags** on all pages
• **Structured data** (Product, Organization, BreadcrumbList, FAQ schemas)
• **XML sitemap** auto-generated from the product catalog
• **robots.txt** carefully configured
• **Google Search Console** URL inspection for top 50 pages

We also submitted a change-of-address in Search Console and monitored crawl stats daily for two weeks.

Technical Deep Dive: Performance Optimization

Image Pipeline Product images were the biggest performance bottleneck on the old site. Our solution:

1. Automated conversion — all uploaded images are converted to AVIF and WebP formats 2. Responsive srcsets — Next.js Image component generates 6 size variants automatically 3. Blur placeholders — low-quality image placeholders (LQIP) generated at build time 4. CDN caching — images served from Vercel's edge network with aggressive cache headers

Result: average image payload per page dropped from 2.4MB to 180KB.

Server Components Architecture We use React Server Components aggressively:

// This component renders on the server — zero JS shipped to client
async function ProductCatalog({ category }: { category: string }) {

return ( {products.map(product => ( ))} ) }

// Only the configurator is a Client Component (needs interactivity) 'use client' function ProductConfigurator({ product }: { product: CapProduct }) { const [config, setConfig] = useState(defaultConfig) // Interactive 3D preview, pricing, etc. } `

This means product listing pages ship almost zero JavaScript. Only interactive components (configurator, cart, filters) run on the client.

Edge Middleware for Geo-Pricing NR Caps serves customers in the US, Canada, and Europe. We use Next.js edge middleware to detect location and adjust currency display:

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US'

const response = NextResponse.next() response.cookies.set('currency', currency) return response } `

This runs at the edge — under 1ms latency — so users see localized pricing on their very first page load.

The Results: Before vs After

Performance Metrics

Business Metrics (First 3 Months)

The most impactful number: quote requests tripled. The 3D configurator dramatically lowered the friction of the quoting process. Customers who previously bounced because they couldn't quickly see pricing now configure their caps, see the price, and submit — all in under 3 minutes.

Maintenance Cost

Lessons Learned

1. Don't Underestimate Content Migration We spent more time migrating and restructuring content than writing new code. Every product description needed rewriting, every image needed re-optimization, every URL needed mapping. Budget 30% of your timeline for content alone.

2. Run Sites in Parallel Our 6-week parallel run caught issues we would've missed: - Old bookmarked URLs that needed redirects - Third-party integrations (Google Business Profile, Yelp) pointing to old URLs - Email signatures and printed materials with old links

3. Invest in the Admin Experience The fanciest frontend means nothing if the client can't update their own content. We spent two full days building a clean admin interface. NR Caps now updates products, prices, and content without calling us.

4. Performance Is a Feature, Not an Afterthought We set performance budgets from day one: - No page over 500KB total weight - LCP under 1.5s on 3G - Zero layout shift on above-the-fold content

These constraints shaped every technical decision and resulted in a genuinely fast site.

5. SEO Migration Requires Patience Despite doing everything right, organic traffic dipped for 3 weeks post-migration. This is normal. Google needs time to recrawl, reindex, and reassess. By week 6, traffic had recovered and was trending upward. By month 3, it was 180% above pre-migration levels.

Is This Migration Right for You?

Honest assessment — this type of migration makes sense when:

• ✅ You need custom features WordPress can't support well
• ✅ Performance is directly tied to revenue
• ✅ You're spending significant time on WordPress maintenance
• ✅ You have budget for a proper rebuild (not just a theme swap)
• ✅ Your team can maintain a modern JavaScript application

• It does NOT make sense when:
• ❌ Your WordPress site works fine and just needs a new theme
• ❌ You rely heavily on WordPress-specific plugins with no alternatives
• ❌ Your budget is under $5,000
• ❌ You don't have ongoing development support

Conclusion

The NR Caps migration is one of our most rewarding projects. Taking a struggling WordPress site and transforming it into a high-performance, custom-built application with measurable business impact — that's why we do this work.

The web has moved beyond what traditional CMS platforms can deliver for businesses with custom needs. Next.js 16, with server components, edge functions, and built-in optimization, is the best foundation we've found for building these next-generation business applications.

---

Considering a migration from WordPress? Let's talk — we'll assess your current setup and tell you honestly whether a migration makes sense for your business.