Next.js：我们如何将动态路由重定向到静态页面？答案

【问题标题】：Next.js: How can we have dynamic routing redirect to static pages?Next.js：我们如何将动态路由重定向到静态页面？
【发布时间】：2021-02-28 01:00:26
【问题描述】：

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

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

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

如何将这个动态元素与所有页面的静态生成混合在一起？

非常感谢您的帮助！

【问题讨论】：

标签： static rendering next.js url-routing getstaticprops

【解决方案1】：

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

您有两种解决方案：

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

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

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

因为您需要为 SSR 托管一个网络服务器，所以您可以利用 Next.js 9.5 built-in redirection 系统进行永久的服务器端重定向。

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

【讨论】：

我可能是错的，但它看起来不像 OP 正在导出一个完全静态的站点，因为他似乎正在使用 Next.js i18n（不能与静态导出一起使用）。我的猜测是某些页面可能是静态的，而其他页面可能是 SSR 的。不过，静态导出仍然是一个有效点。

【解决方案2】：

如果您使用的是 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;
}

【讨论】：