Skip to main content

Cloudflare Pages

N-Keys utilizes Cloudflare Pages for its global edge network, ensuring the application is incredibly fast worldwide.

Because we are using Next.js Server Components and Server-Side Rendering, we cannot simply use a standard "Static Export". Instead, we use Cloudflare's @cloudflare/next-on-pages adapter.

How @cloudflare/next-on-pages works​

Instead of exporting static HTML, this adapter hooks into the Next.js build process and automatically compiles our Next.js API Routes, Server Components, and Edge Middleware directly into Cloudflare Workers.

This means our middleware.ts runs on Cloudflare's global edge nodes, physically close to the user, providing near-zero latency auth redirects!

Configuration (wrangler.jsonc)​

To configure the Cloudflare deployment, we utilize a wrangler.jsonc file located at the root of the Next.js workspace:

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "n-keys-nextjs",
  "compatibility_date": "2024-05-20",
  "pages_build_output_dir": ".vercel/output/static",
  "observability": {
    "enabled": true
  },
  "compatibility_flags": [
    "nodejs_compat"
  ]
}

Key Highlights:​

  • pages_build_output_dir: Instructs Cloudflare to upload the specific .vercel/output/static folder generated by the adapter.
  • nodejs_compat: A critical compatibility flag that ensures Cloudflare Workers can execute Node.js-specific APIs required by Next.js under the hood.

Build Scripts​

Inside package.json, we expose a dedicated build command:

"pages:build": "npx @cloudflare/next-on-pages"

Cloudflare Dashboard simply runs npm run pages:build, and Cloudflare handles the rest.