如何解决如何在Next.js应用程序中的特定URL上存储“ .html”?
我有一个“ .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路由和这些重定向中使用通配符,这可能会帮助您确定前进的方向。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。