試圖熟悉 nextJS 13。
我遇到的是 getServerSideProps 函數沒有預先渲染頁面道具。這是我第一次嘗試，所以我不知道我是否做錯了。
這裡是
2
443import 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!" },
};
}
我在這裡想要實現的關鍵是在顯示登入頁面之前使用 axios 請求檢查伺服器的會話金鑰。如果使用者已登錄，則應將使用者重新導向至主頁。如果我能夠使此功能正常工作，這是未來的程式碼：
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: {},
};
}
我嘗試使用 npm run dev
仍然得到相同的結果...
您似乎正在嘗試使用
getServerSideProps在顯示頁面之前執行伺服器端渲染和驗證檢查。從您的程式碼來看，您似乎走在正確的軌道上。但是，我注意到您沒有將從
getServerSideProps傳回的 props 傳遞給您的Login元件。為了將伺服器端屬性傳遞給元件，您需要修改Login函數以接受message屬性，如下所示：function Login({ message }) { return (
{message || "NextJS is ok."}
);
}此外，由於您使用的是
getServerSideProps，您的npm run dev命令不會為您的頁面產生靜態 HTML 檔案。相反，頁面將根據每個請求產生。因此，如果您想測試getServerSideProps是否正常運作，您需要向瀏覽器中的頁面發出請求，並檢查控制台日誌以取得console.log( )宣告。我希望這有幫助！如果您還有任何其他問題，請告訴我。
因此，正如我在評論中提到的，您應該遵循此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 (
{"NextJS is ok."}
);
}當然，您需要添加訊息道具。