Cutting Hosting Costs by 80%: Migrating Hans Steel from WordPress to Next.js

The Problem: WordPress Was Bleeding Them Dry

Hans Steel, a steel manufacturing company based in Canada, had a typical small business website problem. Their WordPress site was functional but expensive to maintain. Every month, they were paying:

• $120/month for managed WordPress hosting on a mid-tier plan
• $180/month in bandwidth overage charges during peak traffic periods
• $30/month for a premium page builder plugin
• Occasional $100-200 emergency fees when plugins broke or security vulnerabilities appeared

That is over $300 per month — $3,600 per year — for a simple corporate brochure website that received maybe 2,000 visitors per month. The bandwidth charges were the real killer: every product image, every PDF datasheet, every employee photo added up. WordPress was serving these assets dynamically, without caching, and the hosting bill reflected it.

The Audit: Understanding What They Actually Needed

Before proposing a migration, I audited their existing site to understand what functionality was essential:

• Homepage with company intro and services overview
• About page with team photos and company history
• Products page listing steel product categories with downloadable PDF specs
• Contact page with a simple form (Name, Email, Phone, Message)
• Gallery page showcasing project photos

That was it. No e-commerce. No user accounts. No dynamic content. No blog. Just a digital brochure. WordPress, with its dynamic PHP rendering, database queries for every page load, and plugin overhead, was overkill — and expensive overkill at that.

The Solution: Static Site Migration to Next.js

I proposed a complete migration to Next.js with static site generation (SSG). Here is why this would solve their cost problem:

• No server-side rendering at runtime: Every page is pre-built as static HTML during deployment. Zero database queries when a visitor loads a page.
• Built-in image optimization: Next.js automatically optimizes images, serving modern formats (WebP, AVIF) and responsive sizes. A 2MB product photo becomes a 150KB optimized image.
• Edge caching by default: When deployed to Netlify or Vercel, static pages are cached at edge locations worldwide. Bandwidth costs shift from the hosting provider to the edge CDN — which is free on both platforms.
• No plugin maintenance: Contact form handled by a serverless function. No plugin updates, no security vulnerabilities, no emergency fixes.

The Migration Process: Step by Step

1. Content Extraction from WordPress

First, I exported all content from WordPress:

• Text content: Copied page content directly from the WordPress editor, cleaning up the HTML and converting it to clean Markdown for Next.js pages.
• Images: Downloaded all images from the WordPress media library, then ran them through a batch optimization script using Sharp (a Node.js image processing library) to resize and compress for web delivery.
• PDFs: Downloaded all product specification PDFs and placed them in the public directory for direct serving.
• Contact form: Identified what fields were collected and how submissions were handled (previously via a premium form plugin).

2. Building the Next.js Site Structure

I set up a clean Next.js project with Tailwind CSS for styling:

• Layout component: Shared header, footer, and navigation across all pages
• Static pages: Each WordPress page became a static Next.js page (page.tsx) with pre-rendered content
• Image component: Used Next.js Image component for automatic optimization
• Contact form: Connected to Netlify Forms (built-in, free handling of form submissions)

The entire codebase was 85% smaller than the WordPress installation — no database, no plugin folder, no dynamic rendering engine.

3. Image Optimization: The Bandwidth Killer

The biggest bandwidth savings came from image optimization:

• Original WordPress images: Large JPEGs and PNGs, many exceeding 2MB. The homepage alone loaded 8MB of images.
• Next.js optimized images: Every image now served as WebP, resized to the exact dimensions needed. The homepage loads 800KB total.
• Responsive images: Mobile users receive smaller images than desktop users. A 1500px-wide hero on desktop becomes a 400px-wide hero on mobile.

This single change reduced their image bandwidth by 85%.

4. Deployment to Netlify

I deployed the Next.js site to Netlify for several reasons:

• Free tier generous enough for their traffic: 100GB bandwidth per month included at no cost. Hans Steel's traffic uses less than 5GB per month.
• Global CDN included: Edge caching on Netlify's CDN means zero bandwidth charges for most page loads.
• Built-in form handling: Netlify Forms handles contact form submissions for free, no third-party service needed.
• Instant cache invalidation: When they update content, deploy the site, and new static pages are pushed to the edge within seconds.

The Contact Form: From Plugin to Serverless

Hans Steel's WordPress site used a premium form plugin ($30/month) for their contact form. In Next.js on Netlify, I replaced this with a zero-cost solution:

• Form markup: Standard HTML form with Netlify's data-netlify attribute
• Form handling: Netlify's built-in form processing captures submissions and stores them in their dashboard
• Notifications: Netlify sends an email notification to Hans Steel's sales team on each submission — free
• Spam filtering: Netlify's built-in Akismet integration filters spam submissions — also free

No plugin updates. No security vulnerabilities. No monthly fee. Same functionality.

The Results: Dramatic Cost Reduction

After migrating Hans Steel from WordPress to Next.js, here is what changed:

Monthly Hosting Costs

Item	WordPress (Before)	Next.js on Netlify (After)
Hosting Plan	$120/month	$0 (Netlify free tier)
Bandwidth Charges	$180/month	$0 (100GB included)
Form Plugin	$30/month	$0 (Netlify Forms built-in)
Maintenance/Emergency Fixes	$100-200/month (varies)	$0 (no plugins to maintain)
Total	$430-530/month	$0/month

Yes, zero dollars per month. Netlify's free tier covers everything they need. If they outgrow the free tier (unlikely), their next tier starts at $19/month — still 95% cheaper than WordPress.

Performance Improvements

Beyond cost, performance metrics improved dramatically:

• Page load time: Reduced from 4.2 seconds to 0.9 seconds (average)
• Time to First Byte (TTFB): Reduced from 1.8 seconds to 0.15 seconds (edge caching)
• Lighthouse score: Improved from 45/100 to 98/100
• Mobile performance: 65/100 to 96/100 — critical for their mobile visitors

These performance gains translate to better SEO rankings and a better user experience for potential customers.

Maintenance Simplified

The biggest operational improvement is maintenance:

• No WordPress updates: No more updating WordPress core monthly
• No plugin updates: No plugin compatibility issues, no breaking updates
• No security patches: Static sites have no database to inject, no PHP vulnerabilities to exploit
• No backups needed: The site is regenerated on every deployment from source code. If the hosting provider goes down, redeploy elsewhere in 5 minutes.

Hans Steel's sales team can now focus on selling steel instead of worrying about website maintenance.

What I Would Do Differently

If I were to do this migration again, I would make a few adjustments:

• Start with a content audit: I spent too much time migrating outdated content that was never used. A content audit first would have streamlined the process.
• Automate image migration: I manually downloaded and optimized images. A script would have saved hours.
• Set up a staging environment: I deployed directly to production. A staging URL for client review would have prevented a few back-and-forth deployment cycles.
• Add 404 redirect mapping earlier: The WordPress URL structure changed slightly. Mapping old URLs to new ones before launch would have preserved SEO equity better.

Is This Migration Right for Your Site?

Migrating from WordPress to a static site generator like Next.js is not for everyone. It is ideal for:

• Brochure sites: Sites with stable, infrequently updated content (like Hans Steel's corporate site)
• High-traffic content sites: Blogs, documentation sites, marketing sites where bandwidth costs are crushing
• Sites plagued by maintenance overhead: If you spend hours each month on WordPress updates and plugin conflicts

It is not ideal for:

• E-commerce sites: Dynamic pricing, inventory, and user accounts need server-side rendering (though Next.js can do hybrid static + server-rendered)
• Sites with frequent content updates: If content changes daily, WordPress's CMS is easier than a developer-driven workflow
• Non-technical teams: If the team needs to edit content via a GUI, WordPress wins. Next.js requires developer support or a headless CMS integration.

For Hans Steel, which updates content a few times per year and has a development team available, the static site approach was perfect.

Lessons for Other Small Businesses

If you are running a small business website and feeling the pain of WordPress hosting costs, here are my takeaways:

• Static sites are not just for developers. Modern static site generators like Next.js, Astro, and Hugo can power serious business sites with zero runtime costs.
• Bandwidth is the hidden cost. Check your hosting bill. If bandwidth charges are significant, a static migration will save you money.
• Plugin costs add up. $30/month for a form plugin, $50 for an SEO plugin, $20 for a gallery — these recurring fees compound. Static sites replace most plugins with built-in features.
• Maintenance is a cost. Time spent updating WordPress and debugging plugins is time not spent on your business. Static sites eliminate almost all maintenance overhead.
• Performance is free marketing. Faster sites rank higher in Google and convert better. Static sites give you sub-second load times without optimization effort.

The migration from WordPress to Next.js saved Hans Steel over $5,000 per year, improved their site performance, and eliminated maintenance headaches. If your site is a simple brochure like theirs was, the same approach could work for you.