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
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...
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Nampaknya anda cuba menggunakan
getServerSidePropsuntuk 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函数以接受messageke komponenLoganda. Untuk menghantar sifat sebelah pelayan kepada komponen, anda perlu mengubah suai fungsiLoguntuk menerima atributmessageseperti 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
berfungsi, anda perlu membuat permintaan ke halaman dalam penyemak imbas dan semak log konsol untuk pernyataangetServerSideProps，您的npm run dev命令不会为您的页面生成静态 HTML 文件。相反，页面将根据每个请求生成。因此，如果您想测试getServerSideProps是否正常工作，您需要向浏览器中的页面发出请求，并检查控制台日志以获取console.log( ), arahannpm run devanda tidak akan menjana fail HTML statik untuk halaman anda. Sebaliknya, halaman akan dijana pada setiap permintaan. Jadi jika anda ingin menguji bahawaconsole.log( ).
Saya harap ini membantu! Jika anda mempunyai sebarang soalan lain sila beritahu saya. 🎜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
appSeterusnya.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.