Agentic Website

Webflow to Next.js migration

Convert Webflow to Next.js.

Move the design, content, important URLs, and search signals into an agent-ready codebase your team owns. Start with a 1-1 clone of your homepage, review it, then migrate the rest of the site.

Copy Migration PromptSee how the migration works

A complete Webflow migration

Move every part the website depends on.

The HTML, CSS, JavaScript, and assets cover the visible pages. A complete move also plans for Collections, forms, search, localized routes, scripts, redirects, and publishing rules.

WEBFLOW EXPORTyour-site.zip
42 MB
HTML, CSS, JavaScript, assetsincluded
CMS templates and content modelrebuild
Forms, search, Localize, accountsreconnect
Redirects, analytics, custom scriptsverify

Why other migration methods fail

01

The homepage matches. The Collection pages are empty.

Collection templates and their live CMS behavior need their own rebuild.

02

The form looks complete. Nothing receives the lead.

The interface and the submission service are separate parts of the migration.

03

A cleaner URL quietly becomes a search problem.

Every changed path needs a direct redirect, updated internal links, and a place in the launch plan.

04

Each translated route needs its own move.

The primary locale can be exported, but localized routes and settings need their own migration work.

The better end state

Same website. More room to move.

Visitors keep the experience they know. Search engines keep the paths and signals that matter. Your growth team gets an owned repository it can update with an AI coding agent and review before every release.

Keep

The brand people already recognize.

  • Visual language
  • Proven copy and content
  • Valuable public URLs
Gain

A site your team and its agents can keep improving.

  • Owned code and deployment
  • Agent instructions and context
  • Reviewable releases

What needs to move

Account for every part of your Webflow site.

List the pages, content, forms, search, animations, languages, and URLs before the build begins. Each item gets a clear next step.

01

Pages and components

Static pages, Webflow Components, and shared sections

Turn the visible site into explicit Next.js routes and reusable components. Keep the design language while giving every future edit a clear component structure.

  • Page inventory
  • Shared navigation
  • Responsive layouts
02

CMS Collections

Collection templates and their content model

Map Collection fields, reference and multi-reference fields, rich text, slugs, and Webflow-hosted asset URLs before choosing how content will live in the new site.

  • CSV exports
  • Dynamic routes
  • Asset ownership
03

Forms, search, and gated pages

Experiences that need a working destination

A form can look identical while its submission path changes. Site search needs a new index or provider. User Accounts, Ecommerce, and password-protected pages need an explicit replacement plan.

  • Form delivery
  • Search index
  • Accounts and commerce
04

Interactions and code

Animations, Lottie files, scripts, and embeds

Audit each interaction and custom-code block. Keep the behavior that matters, simplify the rest, and test the result across breakpoints.

  • Webflow interactions
  • Custom scripts
  • Analytics tags
05

Localize

Locale routes, slugs, metadata, and hreflang

A standard code export covers the primary locale. Each translated route and its page settings need an explicit place in the migration plan.

  • Localized slugs
  • SEO settings
  • Language links
06

URLs and cutover

Redirects, canonicals, links, and the domain switch

Decide what happens to every public URL before launch. Update internal links, carry redirects forward, publish the sitemap, and monitor the move after DNS changes.

  • URL map
  • Redirect CSV
  • Post-launch checks

Step-by-step migration plan

Move your Webflow site in five clear steps.

Each step ends with something your team can review before the next one begins.

  1. 01

    List what exists

    List every page and feature on the live Webflow site.

    Crawl the public routes, capture desktop and mobile references, list Collections and integrations, and gather the available exports.

    OutputList of pages, assets, CMS content, animations, and integrations
  2. 02

    Plan the move

    Choose what happens to each URL and Webflow feature.

    Mark each URL as keep, redirect, merge, or retire. Choose the new home for CMS content, forms, search, localization, analytics, and scripts.

    OutputApproved URL map and plan for each feature
  3. 03

    Review the first clone

    Clone the homepage and one CMS page first.

    Build the homepage and one representative Collection or landing page. This validates the design, content model, shared components, and responsive behavior.

    OutputDesktop and mobile review of two working pages
  4. 04

    Move the rest

    Build the remaining pages and reconnect the features people use.

    Apply the approved patterns, migrate content and assets, restore integrations, and add the metadata each page needs.

    OutputComplete preview with working integrations
  5. 05

    Go live

    Run final checks, move the domain, and monitor the new site.

    Test routes, forms, analytics, redirects, canonicals, robots rules, and the sitemap. Change the domain, then monitor search and conversions.

    OutputLaunch report, redirect monitoring, and issue list

Copyable migration prompt

Start in a new Claude Code or Codex terminal.

Let your coding agent clone the starter, or run the setup in your CLI. Add your current website and copy the ready-to-use steps.

migration-prompt.txt
I want to migrate my Webflow website ([YOUR WEBSITE URL]) to Next.js using this starter: https://github.com/Synscribe/launch-template.

Clone the starter into a new folder and open it. Read README.md and AGENTS.md, then run /site-clone with my source URL. Follow the skill and stop at the first review checkpoint.

One detail first

What Webflow website are you moving?

The migration is the starting point

Keep the new site easy to edit and maintain.

The Agentic Website Template gives marketing teams the instructions, reusable components, search foundations, and launch checks to keep improving the site after the move.

Read the Agentic Website manifesto

Clone any design

Bring complex layouts and animations into an owned codebase.

The clone workflow follows the website you already have, including custom layouts, responsive behavior, and important motion. Approved patterns become reusable Next.js components for the rest of the migration.

  • Complex layouts
  • Responsive states
  • Animation review

Stay visible

Help search engines and AI tools understand every important page.

Important copy and links arrive in the page HTML. Clear routes, metadata, structured data, sitemaps, and discovery files help crawlers find and understand the new site.

  • Server-rendered content
  • Explicit public routes
  • Discovery foundations

Keep marketing moving

Let your marketing team work directly with its coding agent.

Project instructions, goals, design tokens, brand voice, example content, and reusable components give Claude Code, Codex, or Cursor useful context for the next page request.

  • Rules stored with code
  • Reusable page patterns
  • Reviewable changes

Maintain it with confidence

Review every update before it reaches customers or crawlers.

The launch checklist and audit keep checking identity, public URLs, discoverability, forms, placeholders, and production settings as the site grows.

  • One launch checklist
  • Automated site audit
  • Safe preview defaults

Before you move

Webflow migration questions

01Is this an automatic Webflow to Next.js converter?+

This is a structured migration workflow for an AI coding agent and a human reviewer. The agent inventories the source, maps URLs and platform features, rebuilds representative routes, and compares the result before the work expands.

02Can the Next.js site keep the same Webflow design?+

Yes, the visible design can be reproduced with Next.js components and the source assets. Complex interactions, responsive behavior, and custom code each need to be audited and tested during the move.

03Will moving from Webflow hurt SEO?+

Any site move can cause temporary search fluctuations. Keeping valuable URLs, adding direct permanent redirects where URLs change, carrying page metadata forward, updating internal links, and monitoring the launch reduces avoidable risk. Rankings may change while search engines process the move.

04What happens to Webflow CMS Collections?+

Collection data can be exported to CSV, but the Collection templates and CMS behavior must be rebuilt in the new stack. Rich text exports as HTML, and image or file fields may still point to Webflow-hosted assets, so those URLs need to be reviewed before the old project is removed.

05Do Webflow forms, site search, and Localize keep working?+

A complete move rebuilds form handling, site search, and localized routes or connects them to new services. The migration inventory identifies these dependencies before the domain moves.

06Do I need a Webflow code export?+

A Webflow code export helps when it is available. You can also start from the public site, CMS exports, redirect exports, and the original assets. Record the available inputs before implementation starts.

07Where does the migrated website run?+

The result is a Next.js repository you own. You bring your own Git hosting, AI coding tool, content services, and deployment account. Vercel is a natural option for Next.js, and you can choose the hosting setup that fits your team.

Checked against current platform guidance

Keep the site. Change who controls it.

Move from Webflow to an agent-ready Next.js codebase.