Next.js App Router V13+如何实现服务端组件路由重定向？

背景 #

此前在Pages路由中，我通过getServerSideProps()返回指定结构实现服务端路由导航，代码如下：

export const getServerSideProps = async (context) => {
    try {
        // 省略其他逻辑
        // 如果token存在，重定向到 '/' 
        if (token) {
            return {
                redirect: {
                    destination: `/`,
                    permanent: false,
                },
                props: {
                    // email, uid, token
                }
            }

        }

    } catch (err) {
        // 要么`token` cookie不存在，要么验证失败
        // 无论哪种情况，允许用户留在当前页面登录
        return {
            props: {

            },
        };
    }
};

现在需要在App Router架构下实现相同的服务端路由重定向功能，该怎么做？

实现方案 #

1. Server Components 中直接使用 redirect 函数 #

App Router默认所有组件都是Server Components，你可以直接导入Next.js提供的redirect函数，在服务端逻辑判断后触发重定向：

import { redirect } from 'next/navigation';

export default async function LoginPage() {
    try {
        // 替换为你的token获取与验证逻辑
        const token = await getTokenFromCookie();
        
        if (token) {
            // 第二个参数对应原逻辑中的permanent：false为临时重定向(302)，true为永久重定向(308)
            redirect('/', false);
        }

        // 无token时渲染登录页面
        return (
            <div>
                {/* 登录表单内容 */}
            </div>
        );
    } catch (err) {
        // 验证失败或无token，继续渲染登录页
        return (
            <div>
                {/* 登录表单内容 */}
            </div>
        );
    }
}

2. Server Actions 中触发重定向 #

如果逻辑在Server Action中处理，同样可以调用redirect函数：

'use server';
import { redirect } from 'next/navigation';

export async function checkAuthStatus() {
    const token = await getTokenFromCookie();
    if (token) {
        redirect('/');
    }
    // 其他业务逻辑
}

3. 全局路由校验用 Middleware #

如果需要在请求到达页面之前就完成重定向判断（比如全局登录状态拦截），可以使用Next.js Middleware：

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

export function middleware(request: NextRequest) {
    const token = request.cookies.get('token')?.value;
    
    // 示例：访问/login页且存在token时，重定向到首页
    if (request.nextUrl.pathname === '/login' && token) {
        return NextResponse.redirect(new URL('/', request.url));
    }
    
    // 其他情况允许请求继续
    return NextResponse.next();
}

// 指定应用该middleware的路径
export const config = {
    matcher: ['/login'],
};

关键差异说明 #

• Pages路由通过getServerSideProps返回redirect对象触发重定向，App Router则直接在Server Components/Server Actions中调用redirect函数，函数执行后会立即终止组件渲染并触发服务端重定向。
• redirect函数的第二个参数与原逻辑的permanent完全对应，控制HTTP状态码类型。

内容的提问来源于stack exchange，提问作者Ibra