如何在同一域名下同时使用Webflow与Next.js？

完全可以实现同域名下两者共存，以下是几种可行的方案，按推荐程度排序：

1. 反向代理（最优方案） #

这是最优雅且对SEO友好的实现方式，核心通过中间代理服务处理路由转发：

• 将主域名example.com的DNS记录（原CNAME指向Webflow）改为指向反向代理服务，比如Cloudflare Workers、Vercel Edge Functions、Nginx等
• 配置代理路由规则：
  • 根路径/及所有非/user_id/*的请求，转发到Webflow的实际托管地址（比如Webflow分配的xxx.webflow.io域名）
  • 所有/user_id/*开头的请求，转发到你的Next.js项目部署地址（比如Vercel、Netlify的托管域名）
• 注意：需要在Webflow后台完成主域名绑定验证（即使DNS指向代理，Webflow仍需确认你拥有该域名），确保Webflow允许代理转发的请求返回内容。

2. Next.js作为主入口，集成Webflow内容 #

把主域名指向Next.js部署服务，在Next.js中处理Webflow内容渲染：

• 在Next.js的根页面（app/page.js或pages/index.js）中，通过服务器端渲染（SSR）或静态生成（SSG）方式，fetch Webflow页面的HTML内容并直接渲染
• 这种方式避免前端跳转，但需要处理Webflow页面样式、脚本的兼容问题，同时要确保Webflow允许你的Next.js服务器域名发起请求（避免CORS错误）
• 不推荐用iframe嵌入Webflow页面，会导致SEO权重分散、用户体验割裂。

3. Webflow前端路由跳转（兜底方案） #

如果暂时无法部署代理服务，可通过前端脚本做路由判断跳转：

• 在Webflow的全局自定义代码中添加脚本，当检测到当前路径为/user_id/*时，通过window.location.href跳转到Next.js部署地址（但这本质是跳转到外部地址，用户会看到URL变化，并非真正的同路径共存）

针对你提到的“让https://example.com从其他域名获取Webflow页面”的思路，这正是反向代理方案的核心逻辑——代理服务会替用户请求Webflow的托管域名，再将内容返回给用户，用户看到的始终是example.com的地址，完全符合需求。

内容的提问来源于stack exchange，提问作者Jerry Lewandowski