带着问题学 Next 之路由重定向

不换

发布于 2024-04-30 14:05:27

1290

发布于 2024-04-30 14:05:27

文章被收录于专栏：不换的随想乐园不换的随想乐园

大家好，我是不换，现在是凌晨 01:25 ，没错，我还在码文章以及学习(：鬼畜作息

今天起，我决定抛弃“填鸭式”学习的方式，采用“带着问题去探索”的方式学习“next.js”，并输出记录，希望一整个系列之后，你也能和我一样，有很多收获，最终要的是掌握一门新的技术，从熟悉到熟练。

第一期的问题是 Next 中的路由重定向 怎么玩？

问题背景

我们经常在业务开发中会碰到一些“软路径” 问题，诸如 “页面改版重构”，在不影响老路由的情况下，进行分流切换，实现灰度方案。

题外话：其实“灰度”这个词，听起来很高大上，其实没那么难，就是一批用户作为试点，一批用户还是老的。因此“分流”是最主要的一个思路。

所以这个时候就需要我们去实现路由重定向了。

实现方案

我想大家一定先想到的是在 useEffect 中去做 location.href ，但是我们现在可是在 SSR 框架下，从服务端解决问题，比在客户端解决问题很合理一些。

在 next.config.js 中的 redirects 中去做：

 async redirects() {  
    return [  
        {  
            source: '/',  
            destination: '/home',  
            permanent: true, // 如果是永久重定向，设置为true，如果是临时重定向，设置为false  
        },  
  ];  
 },

在 next.config.js 中的 rewrites 配置中去做，这里介绍两种方式：

直接在 rewrites 中去返回数组，它的执行时机是：检查文件系统（页面和/public文件）之后、动态路由之前应用重写module.exports = { async rewrites() { return [ { source: '/about', destination: '/', }, ] }, }
在 rewrites 中的 beforeFiles 和 afterFiles 中去做，控制时机；module.exports = { async rewrites() { return { beforeFiles: [ { source: '/some-page', destination: '/somewhere-else', has: [{ type: 'query', key: 'overrideMe' }], }, ], afterFiles: [ { source: '/non-existent', destination: '/somewhere-else', }, ], } }, }

在 middleware 中去做：重定向或者重写都可以。

import { NextResponse } from 'next/server'  
import type { NextRequest } from 'next/server'  

export function middleware(request: NextRequest) {  
    if (request.nextUrl.pathname === '/') {  
        // return NextResponse.rewrite(new URL('/home', request.url))  
  
        return NextResponse.redirect(new URL('/home', request.url));  
    }  
}

在 SRC 服务端渲染组件中书写重定向逻辑(app/page.tsx)

   import {FC} from "react";  
   import { redirect } from 'next/navigation'
   const CommonPage: FC = () => {  
     
       return  redirect('/home')  
   }

以上便是在 next 中以 非客户端 的视角处理重定向的四个方案了。

其实我们大概可以分为“静”和“动”两个处理层面，next.config.js 中的配置更偏向于静态的，写死的，而 middleware 和 SRC 中的写法，更偏向于动态的，可以做一个逻辑判断的，比如灰度、请求之类的。

本期到这里就结束了，我是不换，希望你有收获，我们下期再见?！

本文参与?腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-01-18，如有侵权请联系?cloudcommunity@tencent.com 删除

重定向