Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    Next.js 16 Cloudflare Static SEO Kit

    1

    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

    Secure checkout via Stripe

    30-day refund guarantee

    Converts to your local currency at checkout

    0 installsSecurity scanned
    Next.js 16 Cloudflare Static SEO Kit

    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.

    What you get

    Deploying a Next.js site as fully static to CloudflareFixing a build broken by output: exportReaching a 100/100 PageSpeed score

    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 install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    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

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean 2 months ago

    • Passed all security checks, Safe to install

    Listed2 months ago
    Updated1 month ago

    What's inside

    Frequently Asked Questions