How to get cookie to pass it in header in next.js

I am using next.js app.
There is a fetch in the store, but it doesn’t work because it requires custom header with the value of a cookie.
So, there’s a clients cookie called ‘user_id’.
I am trying to fetch API from mobx store:

import { makeAutoObservable } from "mobx";

export class Tests {
    initState = [];

    constructor() {
        makeAutoObservable(this, {}, { autoBind: true })
    }    

    getRecommendations() {
        fetch(`/api/v4/tests`,{
            headers:{'X-Auth-token':'cookie_value_here'}
        })
        .then(res => res.json())
        .then(res => this.initState = res)
    }
}

export const instanceTests = new Tests();

So, my question is that i don’t understand how to pass client’s cookie value to this fetch.

I tried to get cookie in my index.tsx:

...
export const getServerSideProps: GetServerSideProps = async (context) => {
 const cookies = context.req.cookies;
 const token = cookies.user_id;

 return {
   props: {
     userToken: token
    }
  }
}

And now i’m stuck and can’t get how to achieve this cookie value inside the mobx store.