Next.js to Webflow

Next.js is a great framework for building apps, but for a marketing website it often means every copy change, new landing page or blog post goes through a developer, a pull request and a deployment. Moving the marketing site to Webflow gives your team a visual editor and a built-in CMS while the product itself can stay in Next.js. This guide covers how to plan the move, what to export, how to protect your SEO, and when to keep some of your Next.js code.

Next.js to Webflow at a Glance

• Typical timeline: two to six weeks for a marketing site, depending on the number of templates, how much content sits in a headless CMS or MDX files, and how much interactive behaviour needs recreating.
• Biggest SEO risks: changed URL structures (trailing slashes, locale prefixes, dynamic routes), redirects defined in next.config.js or middleware that don’t get carried over, and lost metadata and structured data.
• What moves over: content, images, metadata and your URL map. Components and logic are rebuilt visually in Webflow.
• What usually stays in Next.js: the logged-in product, dashboards, API routes and anything that needs server-side logic.

Why Migrate a Marketing Site from Next.js to Webflow?

• Marketers can ship without engineers. Copy edits, new landing pages, A/B variations and blog posts no longer wait for a deployment.
• Engineering time goes back to the product. The build pipeline, hosting configuration and dependency updates for the marketing site disappear.
• One tool for design, content and hosting. You can drop the separate headless CMS subscription when Webflow’s CMS covers your content needs.
• Faster iteration on design. Layout changes are made visually and published immediately.

Next.js vs Webflow

Next.js

• Built for developers: React components, routing from the file system, and rendering modes such as static generation and server-side rendering.
• Content usually lives in MDX or Markdown files, or in a headless CMS such as Contentful, Sanity or Strapi.
• You manage hosting (often Vercel), environment variables and deployments.

Webflow

• A visual builder with an integrated CMS, hosting, SSL and forms.
• Changes are published with one click by anyone with the right permissions.
• Server-side logic isn’t available, so authentication, personalisation and custom APIs stay elsewhere.

Step 1: Decide What Moves and What Stays

Many Next.js sites combine a public marketing site with a product behind a login. The cleanest approach is to split them:

• Move to Webflow: home, product and feature pages, pricing, about, blog, case studies, docs landing pages, legal pages and landing pages.
• Keep in Next.js: the app, dashboards, authenticated pages and API routes, usually on a subdomain such as app.yourdomain.com.

If the marketing site and the app share a domain and URL space, you can also move in stages with a reverse proxy; see my guide to migrating to Webflow in stages with a reverse proxy.

Step 2: Audit Your Current Site

1. List every public route. Running a production build prints the route list, and your XML sitemap (often generated with a package such as next-sitemap) shows what is currently submitted to Google. Compare both against the pages Search Console reports as indexed.
2. Map dynamic routes to collections. A route like /blog/[slug] or /customers/[slug] is a strong sign of a CMS collection in Webflow.
3. Check URL settings. Note whether the site uses trailing slashes, locale prefixes (/en, /fr) or route groups that affect the final URL.
4. Find every redirect. Redirects can be defined in next.config.js, in middleware, or on your hosting provider’s dashboard. Gather them all, since they all need to be reproduced.
5. Export metadata. Titles, descriptions, canonical URLs, Open Graph tags and JSON-LD may come from a metadata export, a head component or an SEO package. A crawl of the live site captures the result for every page.
6. List scripts and integrations: analytics, tag managers, consent banners, chat, forms and A/B testing tools.

Step 3: Export Your Content

1. MDX and Markdown files: convert them to HTML (a tool such as Pandoc handles this) and place each post in a CSV row, with columns for title, slug, date, author, category, summary, body and image.
2. Headless CMS content: export through the CMS’s API or export feature as JSON or CSV, then reshape it to match your Webflow collection fields.
3. Content hard-coded in components: copy it into a spreadsheet organised by page and section.
4. Images and assets: download everything from your public folder or image CDN, compress large files and keep sensible file names.
5. Authors, categories and tags: these become their own collections that blog posts reference.

Step 4: Rebuild the Design in Webflow

1. Set up variables for your colours, type scale and spacing from your design tokens or Tailwind or CSS config.
2. Turn shared components into Webflow components: navbar, footer, CTA blocks, pricing cards and testimonial sections.
3. Rebuild templates: a Next.js layout becomes a Webflow page or collection template page.
4. Recreate interactions such as scroll animations, tabs, accordions and sliders using Webflow interactions and native elements instead of JavaScript libraries where you can.
5. Plan for responsive behaviour. Webflow’s breakpoints are desktop-first, so check how mobile-first styles translate.

If your design lives in Figma, building from the Figma file is often faster than reading the Next.js code. See my Figma to Webflow handover guide.

Step 5: Replace Next.js Features

• Forms and API routes: Webflow Forms send submissions to email or integrations; for a custom backend, post to a webhook or workflow tool.
• Authentication and gated content: not native to Webflow. Keep logged-in areas in the app, or use a membership tool built for Webflow.
• Search: use a Webflow-compatible search solution, or a third-party search embed.
• Internationalisation: locale routes can become Webflow Localization, with translated content per locale.
• Image optimisation: Webflow serves responsive, optimised images from its CDN, so you no longer need the Next.js image component.
• Personalisation and experiments: these usually need a third-party tool added through custom code.

Step 6: Import Content into the CMS

1. Create collections and fields to match your content model: text, rich text, image, date, reference and option fields.
2. Import your CSV files, then check a sample for broken formatting, especially code blocks, tables and embedded media in rich text.
3. Link references such as author and category.
4. Design the collection templates and connect the fields.

For very large content sets, the Webflow CMS API lets a developer script the import instead of using CSV files.

Step 7: Protect Your SEO

1. Keep URLs the same where possible, including the trailing slash behaviour you had before.
2. Create a redirect map for every URL that changes, then import it as a CSV. My Webflow 301 redirects guide covers syntax, wildcards and bulk import.
3. Reproduce redirects from next.config.js and middleware so existing links keep working.
4. Re-apply metadata to every page: title, description, Open Graph image and canonical.
5. Re-add structured data (JSON-LD) such as Organization, FAQ and Article markup.
6. Check indexing settings. Confirm the sitemap lists what you expect and that robots settings allow crawling.
7. Keep the Webflow staging site out of search results until launch.

Step 8: Test and Launch

• Test all templates at desktop, tablet and mobile widths.
• Submit every form, and confirm analytics, consent and tag manager behave correctly.
• Compare performance with your Next.js site and fix any heavy scripts.
• Lower your DNS TTL ahead of time, connect your domain in Webflow’s publishing settings, publish, then import your redirects and publish again.
• If the app stays on a subdomain, check that links between the marketing site and the app still work.
• Submit the new sitemap in Search Console, then monitor 404s and crawl errors for several weeks. Keep the old deployment available until you’re confident everything is in place, and keep redirects for at least a year.

Common Problems to Avoid

• Trailing slash mismatches that create unexpected redirect chains or 404s.
• Forgetting locale routes and leaving translated pages without redirects.
• Missing redirects that only existed in middleware or hosting settings.
• Migrating the app by mistake. Keep the logged-in product where it is.
• Dropping structured data that was added in code.

Need Help Migrating from Next.js to Webflow?

I’m Nikolai, a Webflow Premium Partner who builds and migrates websites for SaaS companies. I handle the content model, redirect map, rebuild and SEO checks so your marketing site moves without losing rankings. Get in touch to talk about your site, or read more about my Webflow migration services.

Frequently Asked Questions

Why would a team migrate a marketing site from Next.js to Webflow?

Usually to remove engineering from routine marketing work. In Webflow, designers and marketers can build pages, edit content and publish without a developer, while engineers focus on the product.

Can I keep my Next.js app and use Webflow for the marketing site?

Yes, and it’s the most common setup. The marketing site moves to Webflow, and the app stays in Next.js on a subdomain, or the two are joined with a reverse proxy.

Will migrating from Next.js hurt my SEO?

Not if it’s handled carefully. Keep URLs the same where possible, redirect every URL that changes with a 301, carry over metadata and structured data, and monitor Search Console after launch.

How do I move my MDX or Markdown blog posts?

Convert the Markdown to HTML, put each post in a CSV row with its metadata, and import it into a Webflow CMS collection. Check code blocks and tables after import.

What happens to my headless CMS?

You can export its content and move it into Webflow’s CMS, then cancel the subscription. If you need a content model Webflow’s CMS can’t represent, you may keep the headless CMS for that content.

Do I need a developer to migrate from Next.js to Webflow?

It helps for exporting content, reproducing redirects and keeping the app connected, but most of the build is visual and can be done by a Webflow designer.