各位客官好，今天我们要聊的，不是宫斗剧，也不是修仙法门，而是一个现代前端修炼宝典：Next.js 的内置后端能力。这里我们关注两个很实际又常见的场景：
- 重定向（Redirect）
- 路由保护（Route Protection）
前端江湖，跳转即是轻功；保护页面，堪比开防御盾。那我们不妨边拆底层原理，边品味其中的"黑魔法"。
一、Next.js 的"后端身份"
很多初学者第一次接触 Next.js，总是有点懵：
"这不是前端框架吗？怎么还能写 server？"
其实 Next.js 就是一位"半前端半后端"的混血剑客。它既可以在 浏览器端 发上线条（React 组件），也能在 服务端渲染 拔刀相助。它的核心机制是 Node.js 的执行环境，这让我们可以在前端项目里伸手去操纵 HTTP 的请求与响应------也就是浏览器和服务器那份对话。
这便是我们实现路由守卫和重定向的基础。
二、重定向：江湖中的瞬移术
所谓"重定向"，就像武侠小说里的瞬间位移------你本来要去东厂，忽然被一股力量牵引去了皇宫。
在 Next.js 中，常见的有三种重定向姿势：
1. 在 next.config.js 中写死
这个方法就像是立一块告示牌，谁想从道观小路溜到妓院，一律牵去官府报到。
javascript
// next.config.js
module.exports = {
async redirects() {
return [
{
source: "/old-page",
destination: "/new-page",
permanent: true, // 301
},
];
},
};这种方式比较死板，但性能最佳，因为它发生在 构建时 就被服务器托管。
2. 在 getServerSideProps 中玩动态重定向
这种就像是派一个武功高强的门卫，看到你来访时才决定要不要放行。
javascript
// pages/secret.js
export async function getServerSideProps(context) {
const { req } = context;
const loggedIn = Boolean(req.cookies.token);
if (!loggedIn) {
return {
redirect: {
destination: "/login",
permanent: false,
},
};
}
return { props: {} };
}
export default function Secret() {
return <h1>神秘页面</h1>;
}它的原理是依赖 SSR 阶段 注入的 Node.js req/res 能力，根据 cookie 或 session 判断身份。
3. 在客户端做条件跳转
就是所谓"前端自恋式阻拦"------用户点进去页面才发现被 politely 推到别的地方。
javascript
import { useEffect } from "react";
import { useRouter } from "next/router";
export default function ClientSecret() {
const router = useRouter();
useEffect(() => {
const loggedIn = false;
if (!loggedIn) {
router.push("/login");
}
}, [router]);
return <h1>小心被前端踢出去</h1>;
}这种方法不能阻止爬虫或扒接口的黑客，算是"表面功夫"。
三、路由保护：江湖门派的山门大阵
重定向只是换路，但保护页面才是要害武功。
思路原理
- 服务端守卫 ------ 在请求到达之前先检查，符合才渲染，不符就赶走。
- 中间件守卫 ------ 官方在 Next.js 12 推出的名剑
middleware.js，可以在服务端边缘网络拦截。 - 客户端守卫 ------ 页内动态检查，但属于纸糊的窗户纸，盯不住硬核对手。
中间件例子
middleware.js 宛如在城门口立个黑衣大汉，所有人进来都要查通关文牒。
javascript
// middleware.js
import { NextResponse } from "next/server";
export function middleware(req) {
const token = req.cookies.get("token");
if (!token) {
return NextResponse.redirect(new URL("/login", req.url));
}
return NextResponse.next();
}
export const config = {
matcher: ["/protected/:path*"],
};- matcher 像是地图坐标，告诉中间件要在哪些山路口子设卡。
- 拦截是发生在 边缘节点（Edge Runtime） ，比 SSR 还早，被踢回的用户甚至看不到页面骨架。
四、从底层到浪漫
如果用更底层的眼光去理解：
- 服务端重定向其实是 向浏览器返回了一份状态码 + Location header 的 HTTP 响应包。
- 中间件保护本质是 对请求流管道添加了条件分支，就像流水线拦车检查绿码。
- 客户端跳转，不过是 调用了 History API，迷惑浏览器"咱换个 URL 吧"。
而如果用文学的方式来形容：
重定向是挽留------不让你走错道路；
路由保护是守护------不让你轻易窥见禁地。
两者结合，既是一家网站的江湖规矩，也是开发者的写意刀法。
五、总结
- 重定向 → 改变前行方向，可在配置、服务端或客户端实现；
- 路由保护 → 守护秘密路径，中间件是最硬核的解决方案；
- 底层原理 → HTTP 响应指令 + 请求拦截机制；
- 文学彩蛋 → 江湖门派，轻功瞬移，黑衣壮汉，全活现了。