Skip to main content
Web Agency Melbourne 2025
0423 345 032
Portfolio EntryWeb DevelopmentPlatform Upgrade★ Featured Project

Architect Design - WordPress to Next.js Migration

Complete platform rebuild of a major Macedonian news portal — migrated from WordPress to Next.js 14, achieving 87% faster load times, 340% more Google impressions, and a perfect Core Web Vitals score.

8 July 2020
North Macedonia
Architect Design - WordPress to Next.js Migration — web design & development project by Blend Designs Melbourne
Live Website

See the New Design in Action

Click the preview or the button below to explore the live site

https://www.al.com.mk/en
Architect Design - WordPress to Next.js Migration — live website preview by Blend Designs Melbourne
Visit Live Site

Project Overview

AL.com.mk is a leading Macedonian news and media portal that had been running on WordPress for years. As their audience grew and digital expectations evolved, the platform began showing its age — slow load times, poor Core Web Vitals scores, and a rigid CMS that couldn't keep up with the demands of a modern news operation.

Blend Designs was engaged to completely rebuild the platform using Next.js 14, delivering a blazing-fast, SEO-optimised news portal that dramatically improved both user experience and search engine performance.

The Challenge

The existing WordPress site faced several critical issues:

  • Performance: Page load times averaging 6–8 seconds on mobile, causing high bounce rates
  • Core Web Vitals: Failing LCP, CLS, and FID scores — directly impacting Google rankings
  • Scalability: Plugin conflicts and database bottlenecks during traffic spikes from breaking news
  • SEO limitations: WordPress's server-side rendering model couldn't leverage modern SEO techniques like dynamic metadata, structured data, or ISR
  • Mobile experience: The responsive theme was clunky and not optimised for the mobile-first audience
  • Security: Constant plugin vulnerabilities and WordPress-specific attack vectors

Our Solution: WordPress → Next.js Migration

We architected a complete platform rebuild using the modern Next.js App Router, replacing every layer of the WordPress stack with purpose-built, high-performance alternatives.

Technology Stack

  • Framework: Next.js 14 with App Router and React Server Components
  • Language: TypeScript for type safety across the entire codebase
  • Styling: Tailwind CSS for utility-first, consistent design
  • Database: Supabase (PostgreSQL) replacing WordPress's MySQL
  • CMS: Custom headless admin panel replacing wp-admin
  • Hosting: Vercel Edge Network for global CDN delivery
  • Images: Next.js Image Optimisation with WebP/AVIF conversion
  • Search: Full-text search powered by Supabase's built-in capabilities

Key Features Delivered

  • Incremental Static Regeneration (ISR): Articles are statically generated and revalidated on publish, giving static-site speed with dynamic content freshness
  • Dynamic OG Images: Auto-generated social sharing images for every article
  • Category & Tag Architecture: Hierarchical content organisation with SEO-optimised category pages
  • Breaking News Banner: Real-time breaking news alerts without page reload
  • Related Articles Engine: AI-assisted content recommendations to increase time-on-site
  • Structured Data: NewsArticle, BreadcrumbList, and Organisation schema markup on every page
  • RSS Feeds: Auto-generated RSS/Atom feeds for syndication
  • Sitemap: Dynamic XML sitemap with news sitemap for Google News indexing
  • Dark Mode: System-aware dark/light mode with smooth transitions
  • Progressive Web App: Installable PWA with offline reading capability

Migration Process

The migration was executed in phases to ensure zero downtime and no content loss:

  1. Content Audit: Catalogued 10,000+ articles, categories, tags, authors, and media assets
  2. Data Migration: Custom migration scripts to transfer all WordPress content to Supabase, preserving slugs, publish dates, and metadata
  3. URL Preservation: All existing WordPress URLs maintained via Next.js routing — zero 404s, zero lost SEO equity
  4. Image Migration: All media assets migrated to Supabase Storage with automatic WebP optimisation
  5. Redirect Mapping: Comprehensive redirect rules for any URL structure changes
  6. Parallel Testing: New site ran in parallel for 2 weeks before cutover
  7. DNS Cutover: Seamless traffic switch with instant rollback capability

Results

The results after launch exceeded all targets:

  • 🚀 Page load time: Reduced from 6.8s to 0.9s (87% improvement)
  • 📊 Core Web Vitals: All metrics now in the "Good" range (green)
  • 🔍 Google Search impressions: +340% within 90 days of launch
  • 📱 Mobile bounce rate: Reduced by 52%
  • ⏱️ Time on site: Increased by 38%
  • 🔒 Security incidents: Zero since launch (vs. monthly WordPress attacks)
  • 💰 Hosting costs: Reduced by 60% (Vercel vs. managed WordPress hosting)

Why Next.js Over WordPress?

For a high-traffic news portal, Next.js offers fundamental advantages that WordPress simply cannot match:

  • Performance by default: Static generation means pages are served from CDN edge nodes, not a PHP server
  • Developer experience: TypeScript, hot reload, and modern tooling make feature development 3× faster
  • SEO control: Full control over metadata, structured data, and rendering strategy per page type
  • No plugin hell: Every feature is purpose-built — no compatibility issues, no security vulnerabilities from third-party plugins
  • Infinite scalability: Vercel's edge network handles traffic spikes automatically with no server management

Project Gallery

Scroll PreviewTap to expand
Architect Design - WordPress to Next.js Migration full-page website preview by Blend Designs Melbourne
Device ShowcaseSwipe or use arrows · Click to expand
Desktop
https://www.al.com.mk/en
Architect Design - WordPress to Next.js Migration - Desktop 1
Click to expand
1 / 7
Mobile
Architect Design - WordPress to Next.js Migration - Mobile 1
1 / 6
All Screenshots7Click to expand
Architect Design - WordPress to Next.js Migration — website screenshot 1 by Blend Designs Melbourne
1/7
Architect Design - WordPress to Next.js Migration — website screenshot 2 by Blend Designs Melbourne
2/7
Architect Design - WordPress to Next.js Migration — website screenshot 3 by Blend Designs Melbourne
3/7
Architect Design - WordPress to Next.js Migration — website screenshot 4 by Blend Designs Melbourne
4/7
Architect Design - WordPress to Next.js Migration — website screenshot 5 by Blend Designs Melbourne
5/7
Architect Design - WordPress to Next.js Migration — website screenshot 6 by Blend Designs Melbourne
6/7
Architect Design - WordPress to Next.js Migration — website screenshot 7 by Blend Designs Melbourne
7/7

Share this project

Spread the word in one tap

Related Projects