Webflow CMS for Next.js.

Typed content, signed draft previews, and webhook-driven cache revalidation. Let editors manage content in Webflow while you build the experience in React.

Guide · Live demo · Example app · Docs · Try the beta · Agent skill

Beta: next-webflow is on npm as a pre-release. APIs may still change before 0.1.0.

Your CMS, a typed client

// app/page.tsx
import Link from "next/link";
import { getItems } from "@/webflow";

export default async function Blog() {
  const posts = await getItems("posts", { limit: 10 });

  return (
    <main>
      {posts.map((post) => (
        <Link key={post.id} href={`/posts/${post.fieldData.slug}`}>
          {post.fieldData.name}
        </Link>
      ))}
    </main>
  );
}

@/webflow is the client next-webflow typegen generates from your site.

Why next-webflow?

Every team that puts Webflow content on a Next.js site writes the same glue: a fetch wrapper, hand-written types that drift from the CMS, a cache that's either stale or skipped, a webhook route, a preview workaround. next-webflow is that glue, built once, tested against the real Webflow API, and gentle on its rate limits.

• Catch CMS changes before your visitors do. Types come from your actual collections and fields, Option fields arrive with their names, and references resolve into full items. Run next-webflow typegen --check in CI, and a field renamed in Webflow fails your build instead of breaking a page in production.
• Publish in Webflow, live on the next request. Reads are cached by Next.js with tags per site, collection, and item. A signed webhook invalidates exactly what changed: no full rebuilds, no waiting for a cache to expire.
• Previews your editors can actually use. Signed, expiring links open staged content inside your app, with a draft banner and an exit control.
• Safe Rich Text by default. The Data API returns Rich Text HTML exactly as stored, scripts included. WebflowRichText sanitizes it, turns internal links into next/link, and lets you swap any element for your own components.

When to use it

A good fit if editors manage content in Webflow and developers build the site in Next.js (App Router): blogs, editorial and marketing sites, company websites, resource libraries, documentation, and content catalogs.

Look elsewhere if your site is built and hosted entirely in Webflow's Designer, or if you use the Pages Router or another framework. To write to the CMS or manage sites, use Webflow's official SDK, webflow-api: it covers the whole Data API, while next-webflow only reads CMS content for Next.js (with its own client, not the SDK). The two work well together, for example the SDK in a script that creates content and next-webflow to display it.

Try the beta

Requirements for your app: Next.js 15 or 16 with the App Router, React 19, and Node.js 22.12+.

npm install next-webflow

Continue with the guide from step 2 (credentials, typegen, reading content, webhooks), or start from the example blog. The live demo runs on Vercel with real Webflow content. Webflow Cloud support is a preview: see the Webflow Cloud guide.

Agent skill

The repository includes an agent skill for AI coding agents (Claude Code, Cursor, Codex and others that read SKILL.md files): setup steps, the rules agents most often get wrong (no runtime export, no dangerouslySetInnerHTML on Rich Text, a separate token for webhooks), recipes and troubleshooting. Install it in your project with:

npx skills add crashncrow/next-webflow

Or copy skills/next-webflow/ into your agent's skills folder (for Claude Code, .claude/skills/).

Contributing

Bugs and ideas: issues. Setup, commands and the rules for code changes: CONTRIBUTING.md. Security problems: report them privately, see SECURITY.md.

License

This project is licensed under the MIT License.

---

_{Made with 🧉 by nnaro.dev}