Nextjs 实现页面重定向的两种方案

前言

由于项目升级导致历史链接不在维护,但是历史页面链接因为各种方式(比如SEO搜素引擎收录,用户自行收藏等)被用户主动直接访问,面对这些问题,前端开发者是需要考虑将历史页面的访问引导到新的落地页面。

本文介绍基于nextjs框架如何对历史页面链接进行重定向。

首先介绍一下我需要对项目页面进行重定向的原因

由于历史代码取值逻辑有问题,导致百度收录页面的path中包含 undefined,虽然并没有影响页面的展示,但是看起来实在是不专业。所以想通过技术手段处理这一类有问题的页面url。

方案一

通过修改配置文件 next.config.js中的重定向配置

jsx
module.exports = { redirects: async () => { return [ { source: "/guide/[type]/[id]", destination: "/article/[id]", permanent: true, }, ]; }, }

方案二

getInitialProps 方法中进行代码逻辑重定向处理;

核心代码即服务端通过修改相应头状态码302,浏览器进行重定向操作;

jsx
res?.writeHead(302, { Location: url, });

这种处理方式的好处是更加的灵活,开发者可以个性化的控制重定向的前提条件

jsx
import type { NextPage } from "next"; import Router from "next/router"; const Article: NextPage<void> = props => { return <></>; }; Article.getInitialProps = async (context): Promise<void> => { const { id } = context.query; const url = `/article/${id}`; const { res } = context; if (process.browser) { Router.push(url); } else { res?.writeHead(302, { Location: url, }); res?.end(); } }; export default Article;

方案对比

通过next config配置文件与getInitialProps进行对比

  1. config配置便于页面重定向配置统一收拢,方便维护;
  2. config配置减少不必要的page文件,提升项目相应速度;
  3. getInitialProps 可以处理逻辑复杂的重定向逻辑,可以做到特殊页面的特殊处理;

弊端:

  1. 只能进行一些简单的配置,不擅长处理逻辑复杂的重定向逻辑;
  2. getInitialProps 依附具体的页面文件,如果页面不需要特殊处理,通过这种方式会增加开发者的维护成本;

总结

两种方案都有其使用场景,在不同的场景选择不同的处理方式,才能使项目更好的运行。

最后感兴趣的朋友可以通过百度搜索 node 上传文件到服务器关键字来尝试访问,这个页面已经被我重定向到新的文章页面。