Next.jsでapi.interceptorsはクライアントサイドとサーバサイドのどちらで実行されるのか

Next.jsでaxiosのinterceptorsの設定処理はクライアントサイドとサーバサイドのどちらで実行されるのか

Next.js では、axiosのinterceptors の設定処理はクライアントサイドとサーバーサイドの両方で実行される可能性があります。
Next.js はユニバーサル（サーバーサイドレンダリングとクライアントサイドレンダリングの両方をサポート）なフレームワークであるため、設定の場所や使用方法に応じて異なります。

クライアントサイド

クライアントサイドで axios インターセプターを設定する場合は、通常React コンポーネントの中やクライアントサイドでのみ実行されるコードで行います。
例えば、useEffect フックの中で設定することが一般的です。
useEffectはクライアントサイドでしか実行されません。

import axios from 'axios';
import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const instance = axios.create();

    instance.interceptors.request.use(
      (config) => {
        config.headers['X-Custom-Header'] = 'XXXXX';
        return config;
      },
      (error) => {
        return Promise.reject(error);
      }
    );

    instance.interceptors.response.use(
      (response) => {
        console.log('Response received');
        return response;
      },
      (error) => {
        return Promise.reject(error);
      }
    );

    // Make a request
    instance.get('/api/testendpoint')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return <div>My Component</div>;
};

export default MyComponent;

サーバーサイド

サーバーサイドで axios インターセプターを設定する場合は、getServerSideProps や getStaticProps などのサーバーサイドで実行される関数内で設定します。

import axios from 'axios';

export const getServerSideProps = async () => {
  const instance = axios.create();

  instance.interceptors.request.use(
    (config) => {
      config.headers['X-Custom-Header'] = 'XXXXX';
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
  );

  instance.interceptors.response.use(
    (response) => {
      console.log('Response received');
      return response;
    },
    (error) => {
      return Promise.reject(error);
    }
  );

  const response = await instance.get('https://api/testendpoint');

  return {
    props: {
      data: response.data,
    },
  };
};

const MyPage = ({ data }) => {
  return <div>{JSON.stringify(data)}</div>;
};

export default MyPage;

結論

Next.js では、axios のインターセプター設定処理がクライアントサイドとサーバーサイドのどちらで実行されるかは、設定を行う場所に依存します。
クライアントサイドで実行されるコード（React コンポーネントやクライアントサイド限定のフック）ではクライアントサイドで、サーバーサイドで実行されるコード（getServerSideProps など）ではサーバーサイドで実行されます。