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:我们如何将动态路由重定向到静态页面?的主要内容,如果未能解决你的问题,请参考以下文章
Next.js:在实现私有路由时,如何在重定向之前防止未经授权的路由/页面的闪烁?