Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsNext.js 16 Cloudflare Static SEO Kit
Deploy a Next.js 16+ App Router site as a 100% static export to Cloudflare Workers Static Assets, hitting 100/100 PageSpeed with clean technical SEO.
$5
Next.js 16 Cloudflare Static SEO Kit
Example session with this skill installed
Set up my Next.js 16 app for static export and deploy it to Cloudflare Workers Static Assets, then get PageSpeed to 100.
- Read your context and instructions
- Compiled the next js 16
Set up next.config.js for output: 'export' with a custom image loader
wired in (images.loader: 'custom', images.loaderFile: './image-loader.ts').
Created wrangler.toml for Cloudflare Workers Static Assets:
- assets.directory = "./out"
- not_found_handling = "404-page" (not single-page-application — this
site has real per-route pages and its own 404.html, not one SPA shell) - html_handling = "auto-trailing-slash"
Added public/_headers with long-lived, immutable Cache-Control for
/_next/static/* and image assets.
Added scripts/optimize-images.mjs (sharp) generating WebP variants at
6 breakpoints, plus image-loader.ts that maps requested width to the
nearest pre-built file — no runtime image server needed.
Migrated fonts off the Google Fonts CDN to next/font/local with a
subsetted woff2 and font-display: swap.
Added app/sitemap.ts and app/robots.ts (static-safe — no Request-time
APIs), and a JSON-LD block on the article template.
Ran npm run build && npx wrangler deploy, then Lighthouse against the
live URL: 100 Performance / 100 SEO / 0 layout-shift issues. Flagged one
pre-existing <img> tag that was bypassing next/image and serving an
unoptimized 2MB PNG — fixed by routing it through the same loader.
Connects securely to your tools. The creator never sees your data.
About this skill
Most "deploy Next.js to Cloudflare" guides assume you're running a server. This skill is for the other case: a Next.js 16+ App Router site that ships as a 100% static export (output: 'export') to Cloudflare Workers Static Assets, with no Node.js server at runtime.
That constraint breaks things quietly. proxy.ts (the renamed middleware.ts in Next.js 16), Server Actions, ISR, cookies, and next/image's default loader all either fail the build or silently do nothing under static export — and most teams find this out in production, not in development. This skill front-loads that knowledge: a proven next.config.js, a wrangler.toml tuned for Workers Static Assets (not Cloudflare Pages, which is the legacy path here as of 2026), a self-hosted image pipeline (build-time WebP generation + a custom next/image loader, no paid transform service), a self-hosted/subsetted font setup, and a technical SEO checklist (Metadata API, sitemap.ts/robots.ts, JSON-LD).
It ends with a verification procedure, not a promise — the steps to actually confirm a 100/100 PageSpeed score on the live deployment, and what to check first if it isn't 100.
Use this if you're setting up a new static Next.js + Cloudflare project, or debugging one that's failing to build or scoring below 100 on PageSpeed.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scanned
Verified clean 3 months ago
- Passed all security checks, Safe to install
Requires
Node.js