在 next.js 中将顶级域作为静态 html 页面提供服务？答案

【问题标题】：Serve top level domain as static html page in next.js?在 next.js 中将顶级域作为静态 html 页面提供服务？
【发布时间】：2020-04-04 05:51:38
【问题描述】：

在 next.js 中，您可以使用根目录中的“公共”目录来提供静态资产。我在这个目录中有我的 index.html 文件，因为我希望我的登录页面是纯静态的。

但是，当使用next 或next start 时，我无法访问位于http://localhost:3000/ 的登录页面。我只能通过“http://localhost:3000/index.html”访问我的登录页面。

有没有办法设置 next.js，所以顶级域 (http://localhost:3000) 将为我的登录页面提供服务？

【问题讨论】：

标签： next.js

【解决方案1】：

您可以将重写添加到您的next.config.js。为了让 url mysite.com/ 指向 /public/index.html，我将它添加到我的配置中（内容在我的 /public 目录中）：

rewrites: async () => {
    return [
      {
        source: "/",
        destination: "/index.html",
      }
    ]
}

注意：index.jsx/.tsx 将优先于 /public 中的文件

【讨论】：

【解决方案2】：

Next.js 路由器仅提供从pages 目录中的.js、.ts 和.tsx 导出的页面。

您需要一个自定义服务器来提供除此之外的任何内容。

此外，如果您使用像 nginx 这样的反向代理，您可以在服务器访问 Node.js 之前处理此请求。

它的用例是什么？如果登录页面只是一个 .html 文件，您可以将其包装在 Next.js 页面中。使用服务器端渲染，页面将在服务器上预渲染并提供与 .html 文件相同的服务。

或者，如果您无法将 HTML 转换为 JSX，您可以使用 dangerouslySetInnerHTML 将原始 HTML 代码设置为 React 的 render()。但是，请注意跨站点脚本 (XSS) 攻击。

【讨论】：

包装它需要大量的工作，因为它是一个大的 HTML 文件，在标题中带有脚本标签等。
@Roymunson，我已经使用dangerouslySetInnerHTML 用另一个选项更新了答案。如果无法将 HTML 转换为 React 组件，请使用自定义服务器/反向代理解决它，这是一个可行的选择。