大家好,我是不换,现在是凌晨 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
中的写法,更偏向于动态的,可以做一个逻辑判断的,比如灰度、请求之类的。
本期到这里就结束了,我是不换,希望你有收获,我们下期再见👋!