Was trying to get familiar with nextJS 13. What I encountered is getServerSideProps function is not prerendering the page props. That's my first time trying it, so I don't know if I'm doing it wrong.

Here's the code written in /app/login/page.js

import Content from "@/ponents/content";
import LoginForm from "@/ponents/loginForm";
import Title from "@/ponents/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!" },
    };
}

Key thing I'm trying to achieve here is to check the session key with axios request to the server before displaying login page. If user's logged in, user should be redirected to homepage. Here's future code if I will be able to make this function work:

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 to restart with npm run dev Still getting the same results...

Was trying to get familiar with nextJS 13. What I encountered is getServerSideProps function is not prerendering the page props. That's my first time trying it, so I don't know if I'm doing it wrong.

Here's the code written in /app/login/page.js

import Content from "@/ponents/content";
import LoginForm from "@/ponents/loginForm";
import Title from "@/ponents/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!" },
    };
}

Key thing I'm trying to achieve here is to check the session key with axios request to the server before displaying login page. If user's logged in, user should be redirected to homepage. Here's future code if I will be able to make this function work:

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 to restart with npm run dev Still getting the same results...

• javascript
• reactjs
• next.js
• axios

• I think you're using the "old" way when it was with the pages folder. As you are using the app folder with Next 13 you chould fetch like this : nextjs/docs/app/building-your-application/data-fetching/… – OneQ Commented May 17, 2023 at 23:07
• Well, the reason I chose getServerSideProps to handle redirection is because it can handle SSR (server side rendering). Ofc I can make it work with "use client", and useEffect hook, but the issue is that the logged in user would see a blink of login page before being redirected. Your offered method will give me data.. I need user redirection. – justelio19 Commented May 17, 2023 at 23:17
• If you look at the doc I linked, it is not client side. getServerSideProps is handled differently in Next 13 and app folder – OneQ Commented May 17, 2023 at 23:21

2 Answers 2

So as I mentioned in a ment you should follow this https://nextjs/docs/app/building-your-application/data-fetching/fetching#async-and-await-in-server-ponents as you're using Next 13 and the app folder.

This means you can try something like this:

import { redirect } from 'next/navigation';
import Content from "@/ponents/content";
import LoginForm from "@/ponents/loginForm";
import Title from "@/ponents/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>
    );
}

Of course you need to add your message props.

It looks like you're trying to use getServerSideProps to perform server-side rendering and authentication checks before the page is displayed. From your code, it seems like you're on the right track.

However, I noticed that you're not passing the props returned from getServerSideProps to your Login ponent. In order for the server-side props to be passed to the ponent, you need to modify the Login function to accept the message prop like so:

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

Additionally, since you're using getServerSideProps, your npm run dev mand won't generate static HTML files for your pages. Instead, the pages will be generated on every request. So if you want to test if getServerSideProps is working correctly, you'll need to make a request to the page in your browser and check the console log for the output of your console.log() statement.

I hope this helps! Let me know if you have any further questions.