next.js 导出静态 - S3 - 页面重新加载时路由失败 [英] next.js export static - S3 - routing fails on page reload

问题描述

我正在将 next.js 应用程序作为静态导出部署到为静态网站托管配置的 s3 存储桶.

I'm deploying a next.js app as a static export, to an s3 bucket configured for static website hosting.

我使用 next 的 build 和 export 命令生成 out/ 目录，然后将其复制到我的 s3 存储桶中

I use next's build and export commands to generate the out/ directory and then copy that into my s3 bucket

然后存储桶包含一些文件，为简单起见，假设只有 index.html 和 about.html

The bucket then contains some files, for simplicity lets say there's just index.html and about.html

问题是当用户通过 www.website.com 点击 index.html 然后导航到 www.website.com/about一切正常，但重新加载 www.website.com/about 当然会失败.

The problem is when a user hits index.html via www.website.com then navigates to www.website.com/about everything works, but reloading www.website.com/about fails of course.

www.website.com/about.html 会找到正确的资源来呈现网站

www.website.com/about.html finds the correct asset to render the site however

有没有办法导出静态的 next.js 应用程序，托管在 s3 上，并向 /about 代理 /about.html 发出请求?

Is there a way to export a static next.js app, host on s3, and have requests to /about proxy /about.html ?

一如既往，感谢您的关注，更感谢您的参与.

As always, thanks for looking, and thanks even more for participating.

推荐答案

在项目根目录下的 next.config.js 文件中.

On your next.config.js file at the root of the project.

module.exports = {
    trailingSlash: true,
}

现在您可以在pages 目录中创建您的页面(例如about.jsx)，Next 将使用带有index 的文件名创建一个文件夹.当您运行 export 命令时，其中的 html 文件.

Now you can create your pages (e.g. about.jsx) inside the pages directory and Next will create a folder with the file name with an index.html file inside of it when you run the export command.

试一试，这里很好用.

这篇关于next.js 导出静态 - S3 - 页面重新加载时路由失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！