My app consists of API (nestjs) and client (nextjs).

I am using getServerSideProps to authenticate the user, and redirect to login site if error occurs:

export const getServerSideProps: GetServerSideProps = async (context) => {
  try {
    // Check whether the user is logged in
    await axios.get(
      `${process.env.NEXT_PUBLIC_API}/authentication`,
      {
        withCredentials: true,
        // Cookies are attached to the request with context
        headers: context.req ? { cookie: context.req.headers?.cookie || '' } : { cookie: '' },
      },
    );

    return {
      props: {},
    };
  } catch (err) {
    return {
      redirect: {
        destination: '/login',
        permanent: false,
      },
    };
  }
};

Server side code for setting cookies:

public getCookieWithJwtToken(userId: number) {
    const payload: TokenPayload = { userId };
    const token = this.jwtService.sign(payload);
    return `Authentication=${token}; HttpOnly; Path=/; Secure; SameSite=None;  Max-Age=${this.configService.get(
      'JWT_EXPIRATION_TIME',
    )}`;
  }

Cookies are working fine in development mode. I am able to log in, use the utilities for authenticated users and log out. However, when I deploy the server to vercel, the cookies are not persisting in the Application --> Cookies tab.

Cookies are being shown in cookie response, but they are not being applied into the browser.

Cookie information in production:

Cookies work as intended in development:

I've been struggling with this issue for several hours this far, help would be really appreciated.