Skip to content

README.md

Latest commit

 

History

History
77 lines (53 loc) · 3.09 KB

README.md

File metadata and controls

77 lines (53 loc) · 3.09 KB

hello-world-next-app-bindings

A Next.js starter for Webflow Cloud with Cloudflare bindings (D1, R2, KV) wired in.

At deploy time, Webflow Cloud provisions the configured services and injects them into your app as typed bindings — no API keys, no connection strings.

Looking for the plain vanilla variant (no bindings)? See hello-world-next-app.

What's included

  • Next.js 16 (App Router) + React 19
  • Tailwind CSS v4
  • @opennextjs/cloudflare for deploying Next.js to Cloudflare Workers via Webflow Cloud
  • wrangler.json with D1 (SQL), R2 (object storage), KV · Sessions, and KV · Flags declared
  • /api/binding-status — a live health check that pings every binding
  • Branded landing page that renders real-time binding status

Quickstart

npm install

# Run locally (no bindings)
npm run dev

# Run locally against real bindings (via wrangler)
npm run dev:cf

Deploy to Webflow Cloud

  1. Fork this repo.
  2. In your Webflow site, open Apps → Webflow Cloud → Create new app and select this repo.
  3. Webflow Cloud reads wrangler.json and provisions D1, R2, and KV automatically.
  4. Pick a mount path (e.g. /app) and click Deploy.

Full walkthrough: https://developers.webflow.com/webflow-cloud/quickstart.

Bindings map

Binding Type Where it's declared Learn more
DB D1 wrangler.json D1 docs
MEDIA R2 wrangler.json R2 docs
SESSIONS KV wrangler.json KV docs
FLAGS KV wrangler.json Flags docs

Access them from any route handler via getCloudflareContext():

import { getCloudflareContext } from "@opennextjs/cloudflare";

export async function GET() {
  const { env } = await getCloudflareContext();
  const rows = await env.DB.prepare("SELECT 1").first();
  return Response.json({ rows });
}

See src/app/api/binding-status/route.ts for a full working example that pings all four bindings.

Customizing

The landing page lives in src/app/page.tsx. The binding status component is src/app/components/BindingsStatus.tsx. Styles are in src/app/globals.css under the wf-* prefix.

Learn more

Built with Next.js · Deployed on Webflow Cloud.