Headless Webflow: Using the CMS API with Next.js & Node (2025)

Published July 2025 • 12 min read

Why go headless?

Webflow powers the CMS & marketing pages, while Next.js handles PWA features, advanced auth, and 100 Lighthouse PWA scores. The 2025 GraphQL API release makes querying painless.

1 — Generate an API token

Site Settings → Integrations → Generate Token (read-only scope). Save value WEBFLOW_TOKEN.

2 — Create GraphQL query

query Posts {
  BlogPosts {
    items {
      _id
      name
      slug
      blogPostExcerpt
      publishedOn
    }
  }
}

3 — Next.js 13 route handler

export async function GET() {
  const res = await fetch('https://graphql.webflow.com/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${process.env.WEBFLOW_TOKEN}`
    },
    body: JSON.stringify({ query })
  });
  return Response.json(await res.json());
}

4 — Incremental Static Regeneration

Add revalidate: 60 to generateStaticParams. Trigger /revalidate route from Webflow Site Publish webhook.

5 — Rich-text rendering

Use react-webflow-rich-text library to convert marks & links.

6 — Image optimization

Pass CMS image URLs to <Image> component; Next Image handles CDN optimisation since assets are on Webflow’s Fastly edge.

7 — Preview mode

Create server action that fetches draft items with accept-version: draft header and sets draftKey cookie.

Conclusion

Headless doesn’t mean ditching Webflow—it means using it where it shines (editing, hosting assets) and extending with React super-powers.