Integrating Webflow and Next.js

This page summarizes the projects mentioned and recommended in the original post on

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarQube - Static code analysis for 29 languages.
  • webflow-on-next

    Here's a link to the final source code for this project. This is just a bare-bones implementation of this integration. Just a few ideas on how we could take this further:

  • axios

    Promise based HTTP client for the browser and node.js

    First let's try to just get the Next.js project's homepage looking like the Webflow homepage. To do this we're going to need to fetch Webflow content. We can do this with Axios. We'll also need a library called Cheerio to parse HTML with Node.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • berry

    📦🐈 Active development trunk for Yarn ⚒

    This tutorial will assume you're already somewhat familiar with Node.js, Next.js, and Webflow. I'm using Yarn as a package manager, but npm would work just fine too.

  • Next.js

    The React Framework

    In this article we'll explore how to do an Automated Design Integration (ADI) with Webflow and Next.js. If you've read my post on ADI patterns, the pattern we're trying to implement here is the "Embed Pattern". Which means we're embedding the design onto another platform (aka the core platform), so the design can take advantage of some of the core platform's features that maybe the design platform doesn't have.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts