reactjs - 如何在 Next.js 应用程序中的特定 URL 处提供 ".html"？

Question

我有一个“.html”文件，我需要在我的 Next.js 应用程序中以特定路线提供服务，就像这样....../pages/customr-route-name/my-html-file.html因此，如果我访问我的网站并输入 http://example.com/custom-route-name/my-html-file.html我能看到它
我怎样才能在 Next.js 中做到这一点？

Answer 1

这需要 API 路由和 URL 重写才能开始工作。好消息是，您也可以将此模式用于其他事情(例如，如果您想生成 RSS 提要或 sitemap.xml)。
注意 :您需要运行 Next 9.5 才能正常工作。
0. 移动您的 HTML 文件(可选)
您的文件不需要位于 ./pages目录让我们把它放在./static反而。稍后将这些路由文件占位符替换为您的真实文件名:./static/<route>/<file>.html1.创建API路由
接下来让您创建API routes类似于您在 Express 等旧式主机中的操作方式。任何名称都可以，只要它在 ./pages/api 中即可.我们称之为./pages/api/static/<route>/<file>.js

// import

import fs from 'fs';

// vars

const filename = './static/<route>/<file>.html';

// export

export default async function api(req, res) {
  res.setHeader('Content-Type', 'text/html; charset=utf-8');
  res.write(await fs.readFileSync(filename, 'utf-8'));
  res.end();
}

2. 添加对 next.config.js的重写
在接下来， rewrites工作类似于他们的 apache 同行。他们将 url 位置映射到 Next ./page .

// export

module.exports = {
  rewrites: async () => [
    {source: '/<route>/<file>', destination: './pages/api/static/<route>/<file>'},
  ],
};

3.运行它!
您应该能够使用常规 next dev 进行测试。 .当然，更改为 next.config.js要求您手动重新启动开发服务器。
如果您查看 Next 文档，您会发现您可以在 API 路由和这些重定向中使用通配符，这可能有助于您前进的方向。