NextJS 13中getServerSideProps函数未被调用的问题求助

NextJS 13 的 App Router（即/app目录下的页面文件）不支持getServerSideProps——这个数据获取方法是旧版 Pages Router（/pages目录）的专属特性。你把代码写在/app/login/page.js里，属于App Router范畴，所以getServerSideProps完全不会被执行，自然无法实现预渲染props或登录校验的功能。

在App Router中，页面组件默认是Server Component，支持直接在组件内部编写服务器端异步逻辑，以此替代getServerSideProps的功能。

1. 修改登录页代码（实现登录校验+重定向） #

把原getServerSideProps里的逻辑直接移到页面组件内部，用App Router提供的redirect函数实现跳转：

import Content from "@/components/content";
import LoginForm from "@/components/loginForm";
import Title from "@/components/title";
import { redirect } from 'next/navigation';
import api from '@/utils/api'; // 确保你的axios实例配置正确

async function Login() {
    let isLoggedIn = false;
    try {
        const response = await api.get("/users/session-check", {
            withCredentials: true,
        });
        if (response.status === 200) isLoggedIn = true;
    } catch (err) {
        console.log(err.message);
    }

    // 已登录则重定向至首页
    if (isLoggedIn) {
        redirect('/');
    }

    // 未登录则渲染登录页面
    return (
        <Content>
            <div className="ml-2 my-2">
                NextJS is ok.
                <Title text="Login" />
            </div>
            <LoginForm />
        </Content>
    );
}

export default Login;

2. 服务器端数据传递（若需要给组件传props） #

如果要在服务器端获取数据并传递给子组件，直接在Server Component中获取后作为props传入即可：

async function Login() {
    // 服务器端异步获取数据
    const res = await fetch('你的后端API地址', { credentials: 'include' });
    const message = await res.text();

    // 省略登录校验逻辑...

    return (
        <Content>
            <div className="ml-2 my-2">
                {message || "NextJS is ok."}
                <Title text="Login" />
            </div>
            <LoginForm />
        </Content>
    );
}

3. 关键注意事项 #

• 确保你的axios实例在服务器端能正常访问后端服务（本地开发时，若存在跨域问题，建议改用绝对路径调用API）。
• 如果子组件需要使用浏览器专属API（如window），需在组件顶部添加'use client'指令标记为客户端组件（比如LoginForm若要处理表单提交逻辑）。

修改代码后重启开发服务（npm run dev），访问登录页：

• 若已登录，会自动跳转至首页；
• 若未登录，正常显示登录页面，服务器端控制台会打印校验请求的日志。

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