Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
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:
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.
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.
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.