Hello. I've been working on side project, nextjs v14 with auth.js V5.

since I heard that we do not need Axios anymore so I tried to abstract fetch into custom instance.

but once I Oauth with next-auth It stores session in cookie on browser.

I have no idea, how to inject the authorization header into my fetch custom instance without interceptor from axios.

I ended up found out this way to add Authorization Header as below

  try {
      const finalOptions = {
        method,
        ...defaultOptions,
        ...options,
        headers: {
          ...defaultOptions.headers,
          ...options.headers,
        },
      };

      // here 
      if (this.authEnabled) {
        const userSession = await this.getUserSession();
        if (!!userSession && !!userSession.accessToken) {
          finalOptions.headers = {
            ...finalOptions.headers,
            Authorization: `Bearer ${userSession.accessToken}`,
          };
        }
      }

      const response = await fetch(this.baseUrl + url, finalOptions);

but I faced that DynamicServerError - Dynamic Server Usage . apparently that Authorization logic caused the error.

so I made flag as below and used different purpose.

const instance = new CreateFiestaFetch(env.NEXT_PUBLIC_BASE_URL, true);
const staticInstance = new CreateFiestaFetch(env.NEXT_PUBLIC_BASE_URL, false);

const { data } = await staticInstance.get<Array<FestivalCategory>>(endpoint, {
    next: {
      tags: festivalOnBoarding.all,
    },
  });

const { data } = await instance.post<UserProfileResponse>(endpoint, body);

I use staticInstance on the buildTime fetch task. and I used instance for the others.

but I feel like it's not the right way.

any better suggestion guys .. ?

FYI I attached the fullcode of my custom instnace. thanks alot.