getServerSideProps() tidak dipanggil nextJS 13

Question

Cuba membiasakan diri dengan nextJS 13. Apa yang saya hadapi ialah fungsi getServerSideProps tidak mempunyai prop halaman prapaparan. Ini adalah kali pertama saya mencubanya jadi saya tidak tahu sama ada saya melakukannya salah.

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

Perkara utama yang saya cuba capai di sini ialah menyemak kunci sesi pelayan menggunakan permintaan axios sebelum memaparkan halaman log masuk. Jika pengguna log masuk, pengguna harus dialihkan ke halaman utama. Jika saya boleh membuat ini berfungsi, berikut ialah kod untuk masa hadapan:

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

Saya cuba menggunakan npm run dev Masih mendapat hasil yang sama...

Answer 1

Nampaknya anda cuba menggunakan getServerSideProps untuk melakukan pemaparan sisi pelayan dan semakan pengesahan sebelum memaparkan halaman. Berdasarkan kod anda, anda nampaknya berada di landasan yang betul.

Walau bagaimanapun, saya perasan bahawa anda tidak menghantar prop yang dikembalikan daripada getServerSideProps 返回的 props 传递给您的 Login 组件。为了将服务器端属性传递给组件，您需要修改 Login 函数以接受 message ke komponen Log anda. Untuk menghantar sifat sebelah pelayan kepada komponen, anda perlu mengubah suai fungsi Log untuk menerima atribut message seperti berikut:

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

Selain itu, kerana anda menggunakan getServerSideProps，您的 npm run dev 命令不会为您的页面生成静态 HTML 文件。相反，页面将根据每个请求生成。因此，如果您想测试 getServerSideProps 是否正常工作，您需要向浏览器中的页面发出请求，并检查控制台日志以获取 console.log( ), arahan npm run dev anda tidak akan menjana fail HTML statik untuk halaman anda. Sebaliknya, halaman akan dijana pada setiap permintaan. Jadi jika anda ingin menguji bahawa

berfungsi, anda perlu membuat permintaan ke halaman dalam penyemak imbas dan semak log konsol untuk pernyataan console.log( ).

Saya harap ini membantu! Jika anda mempunyai sebarang soalan lain sila beritahu saya. 🎜

Answer 2

Jadi seperti yang saya nyatakan dalam ulasan, anda harus mengikuti ini https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#async-and-await-in-server -components apabila anda menggunakan folder 13 dan app Seterusnya.

Ini bermakna anda boleh mencuba sesuatu seperti ini:

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

Sudah tentu, anda perlu menambah prop mesej.