next.js - 您如何在 Vercel 上的 Next JS 中提供静态站点(例如来自 Webflow 或登录页面生成器)？

Question

我们在 Webflow 和 exported the code 中创建了一个登陆页面.我们现在有来自该导出的 HTML、CSS、JS 和图像。

我们的应用程序使用 Next JS 构建并托管在 Vercel 上。我想通过某些路由(如 /、/pricing、/about 等)和我们自己的应用程序为其他站点提供上面的静态站点.

我们查看了 custom server在 Next JS 上，但这与 Vercel 不兼容。还查看了 Rewrites但是它的优先级低于静态页面，所以不会工作。

我们曾经有一个 Node 应用程序，可以将某些路由定向到提供静态 HTML，而其他路由将指向我们的 React 应用程序。不确定如何在 Next JS 中执行此操作。我希望与 Next JS 有类似的设置，但经过大量搜索后似乎无法弄清楚。

在 Next JS 应用程序的根目录和某些其他路径中托管我们的静态 Webflow 站点的最佳方式是什么？

Answer 1

想出如何用 Rewrites 做到这一点.

从 Webflow 或任何其他登陆页面构建器导出您的登陆页面。将它放在 Next JS 项目的 /public 文件夹中。将目标网页的 index.html 重命名为 landing.html 之类的名称。重命名 pages/index.js。

Next JS 中选择显示内容的执行顺序是:

1. 公共(public)文件夹中的文件
2. 文件在pages/
3. 重写

所以我们删除了 index.html 和 public/index.js 以便我们的重写可以处理它。

将以下重写添加到您的 next.config.js

      {
        source: "/",
        destination: "/landing.html"
      }