(NextJS + Amplify + S3静态托管)如何限制通过URL获取数据？

Question

我正在制作一个静态网站与NextJS和放大。(+反应、打字稿等)

当我使用像/projects/[id]这样的动态路由时，它在本地运行良好，但是在部署后会遇到一些问题(在我将构建文件上传到S3进行静态托管之后)

因为NextJS通过路由在web上发出http请求。

例如，当某人访问example.com/projects/1234时，它会自动调用对example.com/projects/1234的GET请求。因为没有这样的API，所以它返回404，不显示详细页面。

在NextJS文档中，它说

FAQ >为什么Next.js有自己的路由器？它支持浅路由，允许您在不运行数据获取方法的情况下更改URL

但我不想通过URL获取数据..。

Q.我如何限制这个特性？

我尝试了nextConfig中的‘nextConfig: true`’，在网上搜索了一些结果，但没有运气。

下面是我的next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
    reactStrictMode: true,
    images: {
        domains: [
            "some-name.s3.some-region.amazonaws.com",
        ],
    },
    trailingSlash: true,
}

module.exports = nextConfig

提前谢谢。

附注：nextJS版本为12.1.0

Answer 1

这是我的疏忽。

我必须使用NextJS的‘链接’而不是'a‘标签。

在将我的另一个项目和这个项目进行比较后，我将一些'a‘标签更新为'Link’，它开始工作得很好.