# Migrating from Webflow to Next.js, Vercel and Claude Code > How to move a Webflow site to Next.js on Vercel with Claude Code: exporting CMS content, carrying 301 redirects, rebuilding forms, and keeping your SEO intact. Source: https://contengi.com/blog/migrating-from-webflow-to-next-js Author: Stefan Maritz Published: 2026-10-05 ## TL;DR - Webflow's code export gives you static HTML, CSS and JavaScript, and leaves out CMS content, ecommerce, user accounts and localised pages - Blog posts and other collections come out as a CSV per collection, or through the Webflow Data API v2 if you want richer data - Rich text pulled through the API can contain Webflow component markup, which needs converting before it renders in Next.js - Your existing Webflow 301 redirects live in Webflow's site settings, and they stop working the day you leave Webflow hosting, so copy them into `next.config.js` first - Forms and interactions run on Webflow's platform and scripts, so both need rebuilding in code - Keep the domain and the URL structure, and Google treats the move as a change of hosting, the gentlest kind of migration - After the move the site has no admin panel, so plan the content layer before launch ## Why Webflow is the platform people leave first Webflow is a good tool. It gave designers a way to ship production sites without waiting on developers, and its CMS works well for a marketing team that wants to publish without touching code. The reasons teams leave in 2026 have little to do with Webflow getting worse. Claude Code made the alternative cheap. When a model can read your whole codebase, edit any component and ship a new landing page in an afternoon, a visual builder starts to feel like a layer between you and your own site. Jess Cook, VP of marketing at Vector, made this exact move and posted about it on LinkedIn. Her team saw a 436% increase in organic impressions after leaving Webflow and hard coding the site with Claude, and she credits part of that to the new site being easier for Google to read. She also flagged that her team is small and early stage, and that they still run a CMS. Impressions sit a long way from revenue, so treat the number as one team's result and borrow the method. This guide covers what is specific to Webflow. For the general process, from URL inventory to launch week, start with our guide to [migrating any website to Next.js, Vercel and Claude Code](https://contengi.com/blog/migrate-website-to-next-js). ## What does not come with you Webflow lets you export your site's code, and the export is useful as a design reference. Webflow's help centre is clear about [what it leaves out](https://help.webflow.com/hc/en-us/articles/33961386739347-How-do-I-export-my-Webflow-site-code): CMS content, user accounts, ecommerce data and functionality, and localised pages and content. Collection lists show their empty state in exported code, and collection pages show none of the content bound to collection fields. Four other things stay behind because they run on Webflow's platform rather than in the page: - Form handling, since Webflow processes submissions on its own servers - Interactions and animations, which rely on Webflow's own JavaScript - Your 301 redirects, which Webflow serves from its hosting settings - Your generated sitemap, which Webflow builds and adds to robots.txt for you None of these is hard to replace. All of them are easy to forget. ## Step one: list every URL Webflow is serving Start with the sitemap. Webflow can auto-generate one, and its help centre notes that it [adds the sitemap address to your robots.txt automatically](https://help.webflow.com/hc/en-us/articles/33961355371667-Create-a-sitemap-in-Webflow), so open `yourdomain.com/sitemap.xml` and save the list. Then add the URLs from the Pages report in Google Search Console and your top landing pages from analytics. Every one of your old URLs need an answer on the new site, either the same page at the same address or a redirect. Webflow collection pages follow a predictable pattern, a collection slug followed by the item slug, such as `/blog/how-we-price`. Keep that pattern in Next.js and none of those URLs needs a redirect. ## Step two: get the content out You have two routes. The CSV route is quick. Webflow lets you [export any collection's content as a CSV](https://webflow.com/updates/export-content-as-a-csv) straight from the Designer, one file per collection. Do this for every collection, including authors, categories and anything referenced by your blog posts. The API route is better for a large blog. The Webflow Data API v2 returns every item in a collection with its field data, which keeps references intact and avoids spreadsheet clean-up. Ask Claude Code to write a one-off script that pulls each collection into JSON files in your repo. Watch the rich text. Webflow's own [API reference for listing collection items](https://developers.webflow.com/data/v2.0.0/reference/cms/collection-items/staged-items/list-items) notes that rich text values can contain Webflow component instances as `wf-component` markup. That markup means nothing to Next.js, so ask Claude Code to find every instance and convert it to a real component or plain HTML before you build the blog. Then download your images. Collection images and in-body images point at Webflow's CDN, and you want them in your own storage before you switch anything off. Next.js serves them through its [Image component](https://nextjs.org/docs/app/api-reference/components/image), which handles resizing and modern formats for you. ## Step three: rebuild with Claude Code Give [Claude Code](https://docs.claude.com/en/docs/claude-code/overview) the exported HTML and CSS as a reference, along with screenshots of each page template. The export is a poor codebase to keep and a good blueprint to copy from, since it holds your exact spacing, colours and type scale. ``` Read the exported Webflow CSS in /reference and extract the design tokens: colours, font sizes, spacing and breakpoints. Put them in one theme file and use it for every component from here on. ``` ``` Rebuild the blog collection template as /blog/[slug]. Read each post from /content/blog, render the rich text on the server, and generate the routes at build time from the full list of slugs. ``` Webflow sites often hold several versions of the same section, built by different people at different times. Jess found three slightly different table of contents components on her old site. Ask Claude Code to list near-duplicates before it builds anything, and keep one version of each. ## Step four: carry your redirects across Open Site settings, then Publishing, then 301 redirects in Webflow. Every rule in that list was added for a reason, often when someone renamed a page and [ticked the box to redirect the old URL](https://help.webflow.com/hc/en-us/articles/33961294898835-How-do-I-set-up-redirects-in-Webflow). Those rules disappear when Webflow stops serving your domain. Copy the list into `next.config.js`. With `permanent: true`, [Next.js sends a 308 status code](https://nextjs.org/docs/app/api-reference/config/next-config-js/redirects), and Google treats [301 and 308 both as permanent redirects](https://developers.google.com/search/docs/crawling-indexing/301-redirects). Then add new rules for any URL your rebuild changes, and point every old address at its final destination in one hop. ``` Here are my Webflow 301 redirects as a CSV. Convert them into the redirects array in next.config.js with permanent: true. Flag any wildcard rules and any that redirect to another redirect. ``` Test every rule after deploying to a preview URL. A redirect you never tested is a redirect you are hoping works. ## Step five: match your SEO settings, then improve them Webflow stores SEO settings in two places, page settings for static pages and SEO fields bound to collection fields for CMS items. Pull both into the new site. - Static pages get a `metadata` export with their existing title and description - Blog posts get `generateMetadata`, reading the SEO title and meta description from each post - Open Graph images come across from the same settings, or get generated per post - Every page gets a canonical on your production domain - `app/sitemap.ts` replaces the Webflow sitemap, with real last-modified dates Match first, improve second. Launch with the same titles and descriptions you had on Webflow, so any movement in rankings comes from the move itself. If the domain and URLs stay the same, Google treats this as [a change of hosting](https://developers.google.com/search/docs/crawling-indexing/site-move-no-url-changes), and the fewer things change at once, the easier any problem is to trace. Rewrite the titles a month later, once things have settled. Our guide to [SEO for Vercel and Next.js sites](https://contengi.com/blog/nextjs-seo) covers each of these in detail, including how to stop a staging domain getting indexed. ## Step six: rebuild forms and interactions Forms need a new home. A Next.js server action or route handler can receive a submission and pass it to your email tool, CRM or a database. Ask Claude Code to list every form on the old site first, with its fields and where submissions went, so none of them breaks silently. Interactions need a decision. Some of what Webflow animated is better removed, especially anything that delays your main content. The rest can be rebuilt with CSS transitions or a small animation library. Fewer scripts on the page also means a faster page. ## Step seven: decide where content lives Webflow gave you a CMS and an editor in one place. Your new Next.js site has neither, and that gap shows up the first time someone wants to publish a post without opening a code editor. Our guide to choosing a [CMS for Vercel websites](https://contengi.com/blog/cms-for-vercel-websites) lays out the options. Contengi is the AI-native CMS we built for exactly this. Claude Code adds [one signed endpoint to your site from a single prompt](https://contengi.com/integrations/claude-websites), and posts arrive with their title, slug, SEO fields, body, FAQ and featured image, stored in your own database. Edits go back to the same URL, and the agents writing posts work from your knowledge base and hard rules. If you publish to Webflow through Contengi today, its [Webflow integration](https://contengi.com/integrations/webflow) already reads every item in your blog collection, including posts Contengi never wrote. You can refresh and rewrite content there while the rebuild happens, then switch the connection to your new endpoint when the site is ready. Page copy lives in code, where Claude Code edits it, and the same Claude can open and edit any post through the Contengi connector. ## What you gain, and what you have to earn You gain the codebase. Every component, script and tag is yours to change, and Claude Code can change it in minutes. New landing pages stop waiting on a designer and a developer. You also gain control over what loads, which is where speed improvements come from. You gain an AEO advantage only if you keep rendering on the server. AI crawlers from OpenAI, Anthropic and Perplexity read the HTML they receive and do not run JavaScript, so the Next.js defaults suit them well. Our guide to building an [agent-friendly website](https://contengi.com/blog/how-to-build-an-agent-friendly-website) covers the markup side. You have to earn the traffic. A migration done well holds your rankings steady through the move and gives you a faster, cleaner site to build on. The growth comes from what you publish next. ## Launch day 1. Keep your Webflow site plan active until the new site has been live and stable for a few weeks 2. Verify the domain in Search Console before switching DNS, if you have not already 3. Point DNS at Vercel and check the site loads in a private browser window 4. Test every redirect from the old list 5. Submit the new sitemap in Search Console 6. Check that forms deliver to the right inbox ## Frequently asked questions ### Can I export my Webflow site to Next.js? Not directly. Webflow exports static HTML, CSS and JavaScript without CMS content, so you use the export as a design reference and rebuild the site in Next.js with Claude Code, bringing the CMS content across as CSV or through the Data API. ### How do I export Webflow CMS content? Export each collection as a CSV from the Designer, or pull the items through the Webflow Data API v2. The API keeps references between collections intact. ### Will I lose SEO when I move from Webflow to Next.js? Expect some fluctuation while Google recrawls. Keeping the same domain and URLs, copying your Webflow 301 redirects and matching your existing titles and descriptions keeps it small. ### What happens to my Webflow redirects? They stop working when Webflow no longer serves your domain. Copy them from Site settings, Publishing, 301 redirects into next.config.js before you switch DNS. ### How do I run a blog on Next.js without Webflow's CMS? Use markdown in the repo, a headless CMS, or an AI-native CMS such as Contengi, which connects through one signed endpoint Claude Code builds from a single prompt.