getServerSideProps() heißt nicht nextJS 13

Question

Ich versuche, mich mit nextJS 13 vertraut zu machen. Was mir auffällt, ist, dass die getServerSideProps-Funktion keine vorgerenderten Seiten-Requisiten hat. Dies ist das erste Mal, dass ich es versuche, daher weiß ich nicht, ob ich es falsch mache.

Hier ist /app/login/page.js

import Content from "@/components/content";
import LoginForm from "@/components/loginForm";
import Title from "@/components/title";

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

export default Login;

export async function getServerSideProps() {
    console.log("running getServerSideProps function..");
    return {
        props: { message: "NextJS is awesome!" },
    };
}

Das Wichtigste, was ich hier erreichen möchte, besteht darin, den Sitzungsschlüssel des Servers mithilfe einer Axios-Anfrage zu überprüfen, bevor die Anmeldeseite angezeigt wird. Wenn der Benutzer angemeldet ist, sollte er zur Startseite weitergeleitet werden. Wenn ich das zum Laufen bekomme, ist hier der Code für die Zukunft:

export async function getServerSideProps() {
    console.log("Im running getServerSideProps funct ");
    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) {
        return {
            redirect: {
                destination: "/",
                permanent: false,
            },
        };
    }
    return {
        props: {},
    };
}

Ich habe es mit npm run dev versucht Immer noch das gleiche Ergebnis...

Answer 1

您似乎正在尝试使用 getServerSideProps 在显示页面之前执行服务器端渲染和身份验证检查。从您的代码来看，您似乎走在正确的轨道上。

但是，我注意到您没有将从 getServerSideProps 返回的 props 传递给您的 Login 组件。为了将服务器端属性传递给组件，您需要修改 Login 函数以接受 message 属性，如下所示：

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

此外，由于您使用的是 getServerSideProps，您的 npm run dev 命令不会为您的页面生成静态 HTML 文件。相反，页面将根据每个请求生成。因此，如果您想测试 getServerSideProps 是否正常工作，您需要向浏览器中的页面发出请求，并检查控制台日志以获取 console.log( )声明。

我希望这有帮助！如果您还有任何其他问题，请告诉我。

Answer 2

因此，正如我在评论中提到的，您应该遵循此 https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#async-and-await-in-server-components 当您使用 Next 13 和 app 文件夹时。

这意味着您可以尝试这样的操作：

import { redirect } from 'next/navigation';
import Content from "@/components/content";
import LoginForm from "@/components/loginForm";
import Title from "@/components/title";

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

export default async function Page() {
    const isLogged = await isLoggedIn();
    if (!isLogged) redirect('/');
    return (
        <Content>
            <div className="ml-2 my-2">
                {"NextJS is ok."}
                <Title text="Login" />
            </div>
            <LoginForm />
        </Content>
    );
}

当然，您需要添加消息道具。