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 上传文件到服务器关键字来尝试访问，这个页面已经被我重定向到新的文章页面。