问题描述

我有一个“ .html”文件，需要在Next.js应用程序中按特定路径投放，就像这样...

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

因此，如果我访问我的网站并输入http://example.com/custom-route-name/my-html-file.html，我会看到它

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

解决方法

这需要一个API路由和一个URL重写才能起作用。令人高兴的是，您也可以将此模式用于其他用途（例如，如果要生成RSS feed或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`

添加重写

在接下来的内容中，rewrites的工作方式与他们的Apache同行相似。他们将网址位置映射到下一个./page。

// export

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

3。运行它！

您应该可以使用常规的next dev对此进行测试。当然，对next.config.js的更改要求您手动重新启动开发服务器。

如果您查看Next docs，您会发现可以在API路由和这些重定向中使用通配符，这可能会帮助您确定前进的方向。

next-router reactjs reactjs reactjs reactjs