not exactly in nextjs, but for react I used axios and it interceptors for such thing

i saw that somewhere else. I was trying to avoid using Axios as its a huge package.

other way probably create some kind of hook wrapper for fetch , to have some kind of custom interceptors, here is quick example from chatgpt

import { useEffect } from 'react';
import { useRouter } from 'next/router';

function useCustomFetch(url, options, onDataReceived) {
  const router = useRouter();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url, options);

        if (response.status === 401) {
          // Redirect to the main page or login page
          router.push('/');
        } else {
          // Continue processing the response
          const data = await response.json();
          console.log('Received data:', data);

          // Run the provided callback on the received data
          if (typeof onDataReceived === 'function') {
            onDataReceived(data);
          }

          // Add your logic to handle the successful response here
        }
      } catch (error) {
        console.error('Error processing request:', error);
        // Add your logic to handle errors here
      }
    };

    fetchData();
  }, [url, options, router, onDataReceived]);

  // You can return additional data or state here if needed
}

then use it like

 const apiUrl = 'https://api.example.com/data';
  const fetchOptions = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      // Add other headers as needed
    },
    // Add other fetch options as needed
  };

  // Define a callback function to run on received data
  const handleDataReceived = (data) => {
    // Add your logic to handle the received data here
    console.log('Handling received data:', data);
  };

  // Use the custom fetch hook with the onDataReceived callback
  useCustomFetch(apiUrl, fetchOptions, handleDataReceived);

Thanks!