0

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

它包含一个 getServerSideProps 函数，该函数分析 slug 并决定重定向

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

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

非常感谢你的帮助！

4

2 回答 2

0

如果您使用的是 AWS CloudFront，则可以使用CloudFront Functions进行重定向。

CloudFront Functions 非常适合用于以下用例的轻量级、短时间运行的函数：

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

当 NextJS 页面被移动或删除时，这是我们用来将客户端（例如 Native App、Google 搜索索引等）重定向到新位置的方法。

// 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;
}
于 2021-08-29T14:19:51.347 回答
0

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

你有两个解决方案：

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

请记住，出于 SEO 目的，第一个解决方案更正确（作为来自浏览器的 301 重定向）。

编辑：@juliomalves 正确地指出 OP 正在研究两个不同的东西：重定向和混合构建。但是，应该进一步澄清问题才能真正解决他的问题。

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

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

于 2021-04-12T16:23:09.520 回答