Maison > Questions et réponses > le corps du texte
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...
P粉1667793632023-11-01 11:37:06
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
console.log()
. J'espère que cela vous aidera ! Si vous avez d'autres questions, faites-le-moi savoir. 🎜
P粉6638838622023-11-01 09:35:08
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.