From WordPress to Next.js: How AI Helped a Network Engineer Build a Modern Blog

As a network engineer who spends my days automating Cisco infrastructure and building CI/CD pipelines, managing a WordPress blog felt wrong. Every week brought plugin updates, security patches, and page load times slower than BGP convergence. There had to be a better way.

The Problem: WordPress Limitations

Here's what my WordPress reality looked like:

Performance Tax

• Page loads: 2-3 seconds typical
• Database queries on every request
• PHP processing overhead
• Slower than optimized Cisco ACI fabrics

Plugin Dependency Spiral

• 23 plugins installed (SEO, caching, syntax highlighting, etc.)
• Constant compatibility issues
• Different update schedules
• Configuration conflicts

Security Treadmill

• Weekly plugin updates required
• Monthly WordPress core updates
• Theme compatibility concerns
• Constant vigilance needed

Cost Equation

• Managed hosting: $25/month
• Premium theme: $60/year
• Essential plugins: $100/year
• Total: ~$460/year

Limited Control

• Restricted by theme capabilities
• Plugin conflicts blocking features
• Often required hiring developers
• No version control on content

The Solution: Modern Web Stack

After researching alternatives, I found Next.js - a React framework that generates completely static pages at build time.

Why This Makes Sense:

• No database queries at runtime
• No PHP processing on every request
• Pre-built HTML/CSS/JavaScript served from CDN
• Pages load in under 500ms

This clicked with my network engineer brain: why compute the same thing repeatedly when you can compute once and cache? It's the web equivalent of route summarization.

The Challenge: I don't write React code for a living.

Building With AI: What We Created

Claude Code (Anthropic's AI coding assistant) turned out to be more than a code generator - it was like pair programming with an AI that understands context.

Instead of spending weeks learning React, I explained what I needed, and Claude built it while explaining the decisions. Not just dumping code, but teaching me why certain approaches work.

What We Built:

• Next.js 16 with App Router
• MDX for content (Markdown + React components)
• Tailwind CSS for styling
• Full-text search across posts
• Smart content discovery
• RSS feed generation
• Google Analytics integration
• Responsive design
• Docker development environment
• One-click Vercel deployment

Concrete Example - The Related Posts Algorithm:

WordPress just shows random posts from the same category. We built something smarter:

// Score posts based on:
- Shared tags: 10 points per match
- Same category: 5 points
- Recent publication: recency bonus
// Then sort by score and show top 6

Simple, effective, and I actually understand the logic because we discussed it.

Key Insight: AI enabled me to build something I previously couldn't. But I still made all the important decisions - features, navigation, trade-offs. The AI provided options and implemented solutions. I provided direction and judgment.

The Architecture: How It All Works

┌─────────────────────────────────────────────────────────────┐
│                    GITHUB REPOSITORY                        │
│  ┌───────────────────────────────────────────────────────┐  │
│  │  /content/posts/*.mdx      Blog posts in Markdown     │  │
│  │  /components/*.tsx         React components           │  │
│  │  /app/**/page.tsx          Next.js routes            │  │
│  │  /lib/posts.ts             Content management        │  │
│  │  /styles/globals.css       Styling & themes          │  │
│  └───────────────────────────────────────────────────────┘  │
└──────────────────────┬──────────────────────────────────────┘
                       │ git push
                       ▼
┌─────────────────────────────────────────────────────────────┐
│                    VERCEL PLATFORM                          │
│  ┌───────────────────────────────────────────────────────┐  │
│  │  BUILD PROCESS                                        │  │
│  │  1. npm install           Install dependencies       │  │
│  │  2. next build           Generate static pages       │  │
│  │  3. Optimize assets       Image optimization         │  │
│  └───────────────────────────────────────────────────────┘  │
│                       │                                     │
│                       ▼                                     │
│  ┌───────────────────────────────────────────────────────┐  │
│  │  DEPLOYMENT (Serverless)                              │  │
│  │  - Static HTML pages       Instant load times        │  │
│  │  - API Routes              /api/subscribe, etc.      │  │
│  │  - Serverless Functions    On-demand execution       │  │
│  └───────────────────────────────────────────────────────┘  │
└──────────────────────┬──────────────────────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────────────────────┐
│                    VERCEL EDGE NETWORK                      │
│         Global CDN with 100+ locations worldwide            │
└──────────────────────┬──────────────────────────────────────┘
                       │
         ┌─────────────┼─────────────┐
         ▼             ▼             ▼
    [Browser]     [Browser]     [Browser]
     London      New York       Tokyo
   <500ms load  <500ms load  <500ms load

Request Flow:

1. Reader visits beye.blog → routed to nearest CDN edge
2. Static pages served instantly (no database!)
3. Dynamic features (search, newsletter) call serverless API routes
4. Content updates trigger automatic rebuilds

This Architecture Delivers:

• Performance: Pre-rendered pages from CDN
• Scalability: Automatic traffic handling
• Cost: Free tier for moderate traffic
• Reliability: 99.99% uptime SLA

Deploying Your Own: Quick Guide

Prerequisites:

• GitHub account (free)
• Vercel account (free)
• Blog content in MDX files
• Optional: Mailchimp for newsletter

Step 1: Push to GitHub

git init
git add .
git commit -m "Initial commit"
git push -u origin main

Step 2: Import to Vercel

1. Go to vercel.com, sign in with GitHub
2. Click "Add New Project"
3. Select your repository
4. Vercel auto-detects Next.js
5. Click "Deploy"

Step 3: Environment Variables

In Vercel Dashboard → Settings → Environment Variables:

NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
MAILCHIMP_API_KEY=your-api-key
MAILCHIMP_SERVER_PREFIX=us6
MAILCHIMP_AUDIENCE_ID=your-audience-id

Redeploy after adding variables.

Step 4: Custom Domain (Optional)

1. Settings → Domains
2. Add your domain
3. Configure DNS at your registrar
4. Vercel auto-provisions SSL

Step 5: Continuous Deployment

# Make changes
git add .
git commit -m "New blog post"
git push
# Vercel auto-deploys in ~2 minutes

Step 6: Monitor Performance

• Build logs in deployment dashboard
• Built-in analytics (100k pageviews/month free)
• Real-time error reporting
• Core Web Vitals tracking

Common Troubleshooting:

• Build fails: Check TypeScript interfaces, environment variables
• Env vars not working: Set for "Production", then redeploy
• Slow builds: Enable build cache in settings
• 404s: Verify generateStaticParams() implementation

Cost Expectations:

Vercel free tier includes:

• 100GB bandwidth/month
• Unlimited sites and deployments
• Automatic HTTPS/SSL
• DDoS protection
• Sufficient for most personal/professional blogs

Pro plan ($20/month) if you exceed limits.

Security Benefits:

• No database = no SQL injection
• Serverless functions = isolated execution
• Automatic HTTPS with auto-renewal
• No admin panel = can't be brute-forced
• API keys in Vercel environment (never in code)

Comparison: WordPress vs Next.js + Vercel

When to Choose What

Choose WordPress if you:

• Need quick setup with minimal technical knowledge
• Want visual content editing
• Require extensive third-party integrations
• Have multiple non-technical authors
• Need built-in user roles and media management

Choose Next.js + Vercel if you:

• Prioritize performance (sub-second loads)
• Want to minimize hosting costs
• Prefer version control for everything
• Have technical background or AI assistance
• Need complete customization control
• Value security through simplicity
• Enjoy writing in Markdown

The Bottom Line:

For me as a network engineer, Next.js was the right choice. Performance gains, cost savings ($400/year), and complete control outweighed the initial learning curve.

My blog now loads in under a second. Hosting costs nothing. And I learned modern web development concepts that apply to other projects.

Most importantly: technical expertise in one domain translates to others when you have the right tools. AI has lowered the barrier dramatically.

The entire blog is open source. Questions about implementation? Contact me through the site.