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

wwtsj6pe  于 2022-11-23  发布在  其他
关注(0)|答案(2)|浏览(176)

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

li9yvcax

li9yvcax1#

您可以在next.config.js中添加重写。为了允许url mysite.com/指向/public/index.html,我在我的config中添加了以下内容(内容在我的/public目录中):

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

注意:index.jsx/.tsx将优先于/public中的文件
来源:https://nextjs.org/docs/api-reference/next.config.js/rewrites

z18hc3ub

z18hc3ub2#

Next.js路由器只提供从pages目录中的.js.ts.tsx导出的页面。
你需要一个自定义的服务器,它可以提供除此之外的任何服务。
Custom Server
此外,如果使用反向代理(如nginx),则可以在请求到达Node.js之前由服务器处理该请求。
如果登陆页面只是一个.html文件,您可以将其 Package 在Next.js页面中。通过服务器端呈现,页面将在服务器上预先呈现,并以与.html文件相同的方式提供。
或者,如果您无法将HTML转换为JSX,您可以使用危险的SetInnerHTML将原始HTML代码设置为React的render()

相关问题