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

Posted 2023-02-22

【中文标题】如何在 Next.js 应用程序中的特定 URL 处提供“.html”？

【英文标题】：How to server a ".html" at certain URL in a Next.js app?

【发布时间】：2021-01-07 14:10:52

【问题描述】：

我有一个“.html”文件，我需要在我的 Next.js 应用程序的某个路径中提供它，就像这样...

/pages/customr-route-name/my-html-file.html

所以如果我去我的网站并输入http://example.com/custom-route-name/my-html-file.html 我可以看到它

如何在 Next.js 中做到这一点？

【参考方案1】：

这需要 API 路由和 URL 重写才能开始工作。好消息是，您也可以将此模式用于其他事情（例如，如果您想生成 RSS 提要或 sitemap.xml）。

注意：您需要运行 Next 9.5 才能正常工作。

0。移动您的 HTML 文件（可选）

您的文件不需要位于./pages 目录中。让我们把它放在./static 中。稍后将这些路由文件占位符替换为您的真实文件名：./static/<route>/<file>.html

1。创建 API 路由

Next 允许您创建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 的重写

在 Next 中，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 路由和这些重定向中使用通配符，这可能有助于您前进的方向。