typescript - En Next.js, ¿Cómo redirigir la página en un interceptor de axios?

Quiero redirigir la página en el interceptor de Axios.

Sin embargo, cuando haciendo renderizado del lado del servidor, No puedo acceder al contexto del lado del servidor en el interceptor de axios. Así que intento usar next/router, pero solo funciona en el lado del cliente.

¿Cómo puedo hacer esto?

A continuación se muestra la función ejecutada en el interceptador de axios.

// customAxios.ts
const customAxios = axios.create();

customAxios.interceptors.response.use((response) => response, responseErrorHandler);

// responseErrorHandler.ts
const responseErrorHandler = (error: AxiosError): Promise<AxiosError> => {
  if (error.response) {
    if (error.message === TIMEOUT_MESSAGE) {
      if (typeof window === 'undefined') {
         // Redirect to /503 page in server side rendering
      } else {
        window.location.href = '/503';
      }
    }
  }

  return Promise.reject(error);
}

Respuesta #1

Es difícil dar una respuesta sin ver tu implementación real de getServerSideProps o getStaticProps, pero esto podría ayudar. Tu interceptor probablemente debería lanzar un error personalizado que puedas identificar en esos métodos y luego usar redireccionamientos de Next.js

// responseErrorHandler.ts
const responseErrorHandler = (error: AxiosError): Promise<AxiosError> => {
  if (error.response) {
    if (error.message === TIMEOUT_MESSAGE) {
      if (typeof window === 'undefined') {
         throw new CustomError(); //Throw custom error here
      } else {
        window.location.href = '/503';
      }
    }
  }

  return Promise.reject(error);
}

Y luego, en los métodos de obtención de datos (necesita ser adaptado a Typescript):

export async function getServerSideProps(context) {

  try {
    await customAxios.get(...)
  } catch(e) {
    if (e instanceof CustomError){
      return {
        redirect: {
          destination: '/503'
        }
      };
    } else { 
        //...
    }
  }

  //...
}