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

Posted

技术标签:

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

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

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

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

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

非常感谢您的帮助!

【问题讨论】:

【参考方案1】:

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

您有两种解决方案:

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

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

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

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

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

【讨论】:

我可能是错的,但它看起来不像 OP 正在导出一个完全静态的站点,因为他似乎正在使用 Next.js i18n(不能与静态导出一起使用)。我的猜测是某些页面可能是静态的,而其他页面可能是 s-s-r 的。不过,静态导出仍然是一个有效点。【参考方案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;

【讨论】:

以上是关于Next.js:我们如何将动态路由重定向到静态页面?的主要内容,如果未能解决你的问题,请参考以下文章

如何在Button的onClick功能之后或期间重定向?

Next.js:在实现私有路由时,如何在重定向之前防止未经授权的路由/页面的闪烁?

Next.js 重定向/验证

Next.js 将静态路由与动态路由重叠

在 Next.js 中,如何在 axios 拦截器中重定向页面?

Next.js 用于静态导出的动态页面参数