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

Question

在 next.js 中，您可以使用根目录中的“public”目录来提供静态资源。我的 index.html 文件位于此目录中，因为我希望我的登陆页面是纯静态的。但是，当使用next或时，我无法访问http://localhost:3000/next start处的登陆页面。我只能通过“ http://localhost:3000/index.html ”访问我的登陆页面。有没有办法设置 next.js，以便顶级域 ( http://localhost:3000 ) 将为我的登陆页面提供服务？

Answer 1

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

rewrites: async () => {

    return [

      {

        source: "/",

        destination: "/index.html",

      }

    ]

}

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

来源： https: //nextjs.org/docs/api-reference/next.config.js/rewrites

Answer 2

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

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

定制服务器

另外，如果您使用反向代理，nginx您可以在服务器到达 Node.js 之前处理该请求。

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

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