Webflow makes SEO relatively easy: the platform handles canonical tags, generates sitemaps automatically, and provides sensible meta tag defaults. When you move to Next.js, you assume responsibility for all of this — and teams that don't realise this until after launch pay for it in rankings.
What Webflow Does Automatically (That You Must Rebuild)
Step 1: Extract All Webflow URLs
Before writing a line of Next.js code, get a complete list of every URL on your Webflow site. Pull your Webflow sitemap, crawl with Screaming Frog, and cross-reference with Google Search Console's "Pages" report to capture URLs that may not be in your sitemap but are indexed.
Export Google Search Console data for all URLs with impressions in the past 12 months — these are the URLs where you have ranking authority that you cannot afford to lose.
Step 2: Map Old Webflow URLs to New Next.js Routes
Create a spreadsheet with columns: Old Webflow URL | New Next.js URL | Redirect Type (301/Keep/Remove). This is your redirect map. Every row represents a decision about what happens to that URL.
Webflow URL Pattern Changes to Watch For
- • CMS collection slugs:
/blog/post-slug→ Next.js dynamic route/blog/[slug] - • Category pages:
/blog/category/seoneeds matching Next.js route - • Webflow auto-generates slugs from collection names — Next.js slugs are what you define in your data source
- • Webflow's folder structure maps to URL structure — plan your Next.js app directory to match
Step 3: Implement Redirects in Next.js
Next.js handles redirects in next.config.js. For large redirect maps, import from a JSON file:
// next.config.js
const redirects = require('./redirects.json');
module.exports = {
async redirects() {
return redirects.map(({ source, destination }) => ({
source,
destination,
permanent: true, // 301
}));
},
};Step 4: Replicate Meta Tags & Schema
Export your Webflow page settings (title, description, OG tags) and ensure every page's generateMetadata() function outputs identical or improved values. Use our Meta Tag Comparison tool to validate each key page in staging before launch.
For schema markup, Webflow has limited built-in support. Your Next.js implementation is an opportunity to add proper JSON-LD structured data — Article, Breadcrumb, Product, FAQ schemas — that Webflow couldn't generate automatically.
Step 5: Content Migration from Webflow CMS
Webflow CMS content can be exported via the CMS API or CSV export. Your options for the new content source:
- MDX files — Simple for small sites, version-controlled, no external service needed
- Sanity — Most similar editing experience to Webflow CMS, good for teams with non-technical editors
- Contentful — More mature ecosystem, better for enterprise content operations
- Notion + API — For teams already using Notion, though less reliable for production use
Step 6: Validate Before DNS Cutover
Run your Next.js staging build through a full QA checklist before changing DNS. Run all top-50 URLs through the Bulk URL Checker to confirm status codes. Validate redirects with our Redirect Checker. Compare meta tags for your 10 most important pages using the Meta Tag Comparison tool.