Trying to get familiar with nextJS 13.
What I encountered was that the getServerSideProps function did not prerender page props. This is my first time trying it so I don't know if I'm doing it wrong.
Here is
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!" },
};
}
The key thing I'm trying to achieve here is to check the server's session key using an axios request before displaying the login page. If the user is logged in, the user should be redirected to the homepage. If I can get this to work, here's the code for the future:
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: {},
};
}
I tried using npm run dev
Still getting the same result...
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
It looks like you are trying to use
getServerSidePropsto perform server-side rendering and authentication checks before displaying the page. Judging from your code, you seem to be on the right track.However, I noticed that you are not passing the props returned from
getServerSidePropsto yourLogincomponent. In order to pass server-side properties to the component, you need to modify theLoginfunction to accept themessageproperty as follows:function Login({ message }) { return (
{message || "NextJS is ok."}
);
}Additionally, since you are using
getServerSideProps, yournpm run devcommand will not generate static HTML files for your page. Instead, pages will be generated on every request. So if you want to test thatgetServerSidePropsis working properly, you need to make a request to the page in the browser and check the console log for theconsole.log( )statement.I hope this helps! If you have any other questions, please let me know.
So, as I mentioned in the comments, you should follow this https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#async-and-await -in-server-components when you use Next 13 and
appfolders.This means you can try something like this:
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."}
);
}Of course, you need to add message props.