Learning Next.js Through Questions: Redirects

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

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

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

问题背景

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

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

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

实现方案

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

1. 在 next.config.mjs 中的 redirects 中去做：

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

1. 在 next.config.mjs 中的 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',
             },
           ],
         }
       },
     }

2. 在 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));
       }
   }

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

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

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

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

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