getServerSideProps() n'est pas appelé nextJS 13

Question

J'essaie de me familiariser avec nextJS 13. Ce que je rencontre, c'est que la fonction getServerSideProps n'a pas d'accessoires de page pré-rendus. C'est la première fois que j'essaye donc je ne sais pas si je me trompe.

Voici /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!" },
    };
}

L'élément clé que j'essaie de réaliser ici est de vérifier la clé de session du serveur à l'aide d'une requête axios avant d'afficher la page de connexion. Si l'utilisateur est connecté, il doit être redirigé vers la page d'accueil. Si je peux faire fonctionner cela, voici le code pour le futur :

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: {},
    };
}

J'ai essayé d'utiliser npm run dev J'obtiens toujours le même résultat...

Answer 1

Il semble que vous essayez d'utiliser getServerSideProps pour effectuer des vérifications de rendu et d'authentification côté serveur avant d'afficher la page. À en juger par votre code, vous semblez être sur la bonne voie.

Cependant, j'ai remarqué que vous ne transmettez pas les accessoires renvoyés par getServerSideProps 返回的 props 传递给您的 Login 组件。为了将服务器端属性传递给组件，您需要修改 Login 函数以接受 message à votre composant Login. Afin de transmettre les propriétés côté serveur au composant, vous devez modifier la fonction Login pour accepter l'attribut message comme suit :

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

De plus, puisque vous utilisez getServerSideProps，您的 npm run dev 命令不会为您的页面生成静态 HTML 文件。相反，页面将根据每个请求生成。因此，如果您想测试 getServerSideProps 是否正常工作，您需要向浏览器中的页面发出请求，并检查控制台日志以获取 console.log( ), votre commande npm run dev ne générera pas de fichiers HTML statiques pour votre page. Au lieu de cela, des pages seront générées à chaque demande. Donc, si vous voulez tester que

fonctionne, vous devez faire une requête sur la page dans le navigateur et vérifier le journal de la console pour l'instruction console.log().

J'espère que cela vous aidera ! Si vous avez d'autres questions, faites-le-moi savoir. 🎜

Answer 2

Donc, comme je l'ai mentionné dans le commentaire, vous devriez suivre ceci https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#async-and-await-in-server -components quand vous utilisez les dossiers Next 13 et app.

Cela signifie que vous pouvez essayer quelque chose comme ceci :

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>
    );
}

Bien sûr, vous devez ajouter des accessoires de message.