How does Next.js effect sessions and why can’t I add more than 2 items to cart using session

The problem that I’m experiencing is that I’m not able to store more than 2 items in a cart that is in the session. I know how to add elements to carts with the session using req.session.cart.push it seems like I’m only having problems using Next.js. I was hoping that someone can tell me if Next.js effect sessions. I have larger code but I made a very basic test that I’ll show you.

server.post("/addToCart", async (req, res) => {
    try {
        console.log("/addToCart", req.body);
        var  product  = req.body.name;
        // var cart = req.session.cart;
        // console.log("cart", cart)
        console.log("id at Top", req.session.id)

        if(req.session.cart){
            console.log("IN TOP IF")
            console.log("cartLengthTOP", req.session.cart.length)
            req.session.cart.push(product)
            // req.session.cart += ` ${product} `
            console.log("cartLengthBottom", req.session.cart)
            // console.log("cartLengthBottom", req.session.cart.length)
        }else{
            console.log("IN ELSE")
            // req.session.cart = product
            req.session.cart = [product]
        }
        return res.send({ status: "success", cart: req.session.cart });

    } catch (e) {
        console.log("E", e)
        return res.send({ status: "fail", message: "Server error" })
    }
})

I test it out by click on the “add to cart” button on 3 products. When I click on the third product only product 1 and 3 are in the cart but there should be all 3 products in the cart.

Here is the top part of the code that shows session setting.

app.prepare().then(()=>{
async function isAuth(req, res, next) {
    if (req.user) {
        return next();
    } else {
        res.send("Need To be authorized")
        return next()
    }
}

mongoose.connect(connectionString, { useNewUrlParser: true }, function (err) {
    if (err) console.log("err", err);
    console.log("db connected")

const conn = mongoose.connection;
const server = express();
server.use(express.json());
const session = require('express-session')
const MongoStore = require("connect-mongo")(session)

server.use(session({
    secret: 'a;ldfnrlkfe5332',
    resave: true,
    store: new MongoStore({ mongooseConnection: mongoose.connection }),
    saveUninitialized: false,
    cookie : {secure : false}
}));
server.use(passport.initialize());
server.use(passport.session());
passport.serializeUser(function (user, done) {
    console.log("serialize", user.id)
    done(null, user.id);
});
// used to deserialize the user
passport.deserializeUser(function (id, done) {
    User.findById(id, function (err, user) {
        done(err, user.toObject());
    });
});
// const server = express();

I usually use axios for everything so I decided to use fetch because maybe it was an axios issue but it didn’t help.

    fetch('/addToCart', {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, *cors, same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'same-origin', // include, *same-origin, omit
        headers: {
            'Content-Type': 'application/json'
        },
        redirect: 'follow', // manual, *follow, error
        referrerPolicy: 'no-referrer', // no-referrer, *client
        body: JSON.stringify(product)
    })
        .then((response) => {
            // Do stuff with the response
            console.log("response",response)
        })
        .catch((error) => {
            console.log('Looks like there was a problem: n', error);
        });

Edit

I’ve been playing around with it. I noticed that I am able to add a product multiple times to the array when I click a button on the page.
But if I click multiple times on the second product then click once on the 3rd product all the second product elements that were pushed into the array get removed and the 3rd element becomes the 2nd element. I can keep clicking on the button for product 3 and multiple of those will be added but when I click on product 2 all the 3rd elements get taken away.

FYI The products are on different pages.

Sorry to make this edit

Now I see that the sessionId is different every time I click on the button on a different page. I use cookie : {secure : false} That fixed for me last time.
Also when I go to the application tab in chrome counsel I don’t see any session or cookie data. Not sure If I’m supposed to

Edit.
is this https://www.npmjs.com/package/next-session the official thing I’m supposed to use. Maybe it will magically allow me to fix my session issues

Source: ReactJs