Next.js:如何将动态路由重定向到静态页面

Question

使用Next.js，我目前有一个应用程序，它有一个/pages/[…slug]/index.ts 形式的单一入口点

它包含一个getServerSideProps函数，用于分析段塞并决定重定向

在某些情况下，需要重定向，但它始终指向可以静态呈现的页面。示例：将/fr/uid重定向到可以是静态的/fr/blog/uid。在其他情况下，slug已经是一个可以是静态的页面的url。

如何将此动态元素与所有页面的静态生成混合？

非常感谢你的帮助！

Answer 1

如果我正确理解您的问题，那么如果要导出静态站点，则不能使用getServerSideProps。

您有两种解决方案：

1. 在web托管解决方案(即Amazon S3/CloudFront(中配置重定向规则
2. 创建客户端重定向(当安装_app.tsx时，您可以检查router.asPath是否与您想要配置的任何重定向匹配

请记住，出于SEO目的，第一个解决方案更正确(如301从浏览器重定向(。

编辑：@julialves正确地指出，OP关注的是两件不同的事情：重定向和混合构建。然而，这个问题应该澄清一点，才能真正解决他的问题。

因为你需要为SSR托管一个web服务器，所以你可以利用Next.js 9.5内置的重定向系统来拥有永久的服务器端重定向。

当涉及到SSR与SSG时，Next.js允许您采用混合方法，让您可以选择采用数据获取策略。

Answer 2

如果您使用的是AWS CloudFront，那么您可以使用CloudFront函数进行重定向。

CloudFront函数是轻量级、短时间运行的函数的理想选择，适用于以下用例：

• URL重定向或重写–您可以根据请求中的信息将查看器重定向到其他页面，或者将所有请求从一个路径重写到另一个路径

以下是我们在移动或删除NextJS页面时用于将客户端(如Native App、谷歌搜索索引等(重定向到新位置的方法。

// NOTE: Choose "viewer request" for event trigger when you associate this function with CloudFront distribution.
function makeRedirectResponse(location) {
var response = {
statusCode: 301,
statusDescription: 'Moved Permanently',
headers: {
'location': { value: location }
}
};
return response;
}
function handler(event) {
var mappings = [
{ from: "/products/decode/app.html", to: '/products/decode.html' },
{ from: "/products/decode/privacy/2021_01_25.html", to: '/products/decode/privacy.html' }
];

var request = event.request;
var uri = request.uri;
for (var i = 0; i < mappings.length; i++) {
var mapping = mappings[i]
if (mapping.from === uri) {
return makeRedirectResponse(mapping.to)
}
}
return request;
}