Back to articles

Series

Tutorials

Next.js + Strapi Architecture: A Scalable Cloudflare + VPS Setup for SEO Content Sites

Series: standalone website · #1

Launching a content site is easy. Building one that scales, ranks, and doesn’t collapse under traffic is not.

A solid Next.js + Strapi architecture separates concerns from day one—frontend rendering, content management, database storage, media hosting, and edge acceleration. When each layer does one job well, growth becomes predictable instead of painful.

a1353e44-e44d-4a89-885c-3e401126c72e.png


The Recommended Architecture Overview

The production-ready structure looks like this:

Domain 
  → Cloudflare DNS/CDN 
    → Next.js Frontend
        ↓
       VPS
        ├─ Strapi
        ├─ Postgres
        └─ Nginx
        ↓
   Cloudflare R2 (Media)

What Each Layer Does

LayerResponsibility
CloudflareDNS, CDN, SSL, caching, protection
Next.jsSEO pages, routing, SSG/ISR rendering
StrapiHeadless CMS (content editing & API)
PostgresStructured data storage
Nginx/CaddyReverse proxy & TLS termination
R2Image, cover, and asset storage

This separation prevents your VPS from becoming a bottleneck and keeps your SEO surface clean.


What You Need Before Starting

1️⃣ Domain

  • .com
  • Short and brandable
  • No dates, no region words
  • Recommended: Cloudflare Registrar

2️⃣ VPS (CMS + Database)

Minimum recommended setup:

  • 2 vCPU
  • 4GB RAM
  • 40–80GB NVMe
  • Ubuntu 22.04 LTS

This comfortably runs Strapi + Postgres + reverse proxy.

3️⃣ Object Storage (Do Not Use VPS Disk)

Use Cloudflare R2 for:

  • Article images
  • Featured covers
  • Downloadable assets

Keeping media outside the VPS ensures long-term scalability.

R2.png

4️⃣ CDN + DNS

Cloudflare free plan handles:

  • Global acceleration
  • Basic security
  • Static caching
  • Automatic SSL

Technology Stack That Scales

Frontend

  • Next.js (App Router)
  • SSG + ISR
  • SEO-first rendering

CMS

  • Strapi (Headless)

Database

  • Postgres

This combination balances flexibility and performance without platform lock-in.


SEO Structure That Avoids Future Headaches

Architecture alone doesn’t guarantee rankings. URL discipline does.

Multilingual URL Structure

Correct:

example.com/zh/xxx
example.com/en/xxx

Use:

  • zh-CN
  • en-US
  • x-default

Avoid:

  • Query parameter languages
  • Subdomain language separation
  • Mixing regional English variants unnecessarily

Slug Rules

  • Lowercase only
  • Hyphen-separated
  • No dates
  • No IDs

Clean URLs age well and preserve authority.


Ad Strategy Without Damaging SEO

Monetization must not break user experience.

Google Ads / AdSense Best Practices

  • Target: US / CA / AU / SG / JP
  • Exclude: EEA / UK (if not targeting compliance)
  • Load ads asynchronously
  • Reserve container height to avoid CLS

Quick Checklist

  • [ ] Async script loading
  • [ ] Fixed ad container height
  • [ ] No aggressive above-the-fold ads
  • [ ] Mobile spacing optimized

Bad CLS can silently destroy rankings.


Deployment Order (Do This in Sequence)

  1. Buy domain
  2. Buy VPS
  3. Install Docker
  4. Deploy Strapi + Postgres
  5. Configure R2 upload provider
  6. Deploy Next.js frontend
  7. Connect Cloudflare CDN
  8. Integrate Google Ads

Following this order prevents rework.


Growth Path When Traffic Increases

When your site gains traction:

  1. Upgrade VPS → 4C / 8G
  2. Add Redis for caching
  3. Separate database to its own instance
  4. Move frontend to edge deployment (Vercel or Cloudflare Pages)

Each step improves resilience without redesigning the stack.


Why This Architecture Works Long-Term

  • Low operational cost
  • Strong SEO foundation
  • Modular scaling path
  • No platform lock-in
  • Clean separation of concerns

A properly structured Next.js + Strapi architecture turns a content site into an owned digital asset instead of a fragile side project.

Series Navigation

Part 1 of 1

standalone website

Previous articleView series pageNext article