Next.js で Axios リクエスト インターセプターを実装する方法

Axios は、サーバーへの HTTP リクエストの送信を容易にする、広く使用されている JavaScript ライブラリです。その際立った機能の 1 つはインターセプターです。これにより、アプリはリクエストとレスポンスをキャッチできるようになります。 Axios インターセプターを使用すると、リクエストまたはレスポンスがアプリケーションに到達する前に、リクエストまたはレスポンスごとに実行される関数をセットアップできます。これは、認証トークンの追加、ログ記録、グローバルなエラー処理などのタスクに役立ち、コードがクリーンになり、管理が容易になります。

このブログ投稿では、Next.js アプリケーションに Axios リクエスト インターセプターを実装する方法を学びます。まず Axios をセットアップし、次にリクエストとレスポンスのインターセプターを作成して使用する方法を見ていきます。最後には、インターセプターを使用してアプリケーションを改善し、コードを整理する方法を理解できるようになります。

プロジェクトのセットアップ

Next.js アプリケーションに Axios リクエスト インターセプターを実装する方法を説明する前に、次のものが揃っていることを確認してください。

• Node.js と npm/yarn がインストールされています: Node.js と npm (または Yarn) がマシンにインストールされていることを確認します。ここから Node.js をダウンロードできます。

• Next.js プロジェクトのセットアップ: Next.js プロジェクトのセットアップが必要です。お持ちでない場合は、「Create Next App」を使用して新しい Next.js プロジェクトを作成できます:
  

npx create-next-app my-axios-app
cd my-axios-app
npm install axios

または

yarn add axios

リクエストインターセプタの実装

Axios のリクエスト インターセプターを使用すると、リクエストがサーバーに到達する前に変更できます。これらは、認証トークンの追加、カスタム ヘッダーの設定、またはリクエストのログ記録に役立ちます。 Next.js アプリケーションに Axios リクエスト インターセプターを実装する方法は次のとおりです。

ステップ 1: Axios インスタンスを作成する

lib フォルダー (またはプロジェクト内の任意の場所) に新しいファイル axiosInstance.js を作成します。前に作成した Axios インスタンスにリクエスト インターセプターを追加できます。このインターセプターは、すべてのリクエストが送信される前に実行されます。

Axios インスタンスを作成すると、そのインスタンスで行われるすべてのリクエストに適用されるベース URL やヘッダーなどのデフォルト設定を設定できます。これは、コードを DRY (同じことを繰り返さない) に保つのに役立ちます。

lib フォルダーに axiosInstance.js という名前の新しいファイルを作成し、Axios インスタンスをセットアップします。

// lib/axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://dummyjson.com', // Replace with your API base URL
  timeout: 1000,
  headers: { 'Content-Type': 'application/json' }
});

// Add a request interceptor
axiosInstance.interceptors.request.use(
  function (config) {
    // Do something before the request is sent
    // For example, add an authentication token to the headers
    const token = localStorage.getItem('authToken'); // Retrieve auth token from localStorage
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function (error) {
    // Handle the error
    return Promise.reject(error);
  }
);

export default axiosInstance;

これまでに行ったことの概要は次のとおりです:

• axios.create() を使用して Axios インスタンスを作成しました。
• baseURL を API のベース URL に設定します。 API の構成に合わせてこれを調整できます。
• 送信リクエストをインターセプトして変更するために interceptors.request.use() を使用しました。これにより、ヘッダーや認証トークンを追加したり、リクエスト構成にその他の変更を加えることができます。

ステップ 2: Next.js ページまたはコンポーネントで Axios インスタンスを使用する

リクエスト インターセプターを設定すると、通常どおり Next.js ページまたはコンポーネントで Axios インスタンスを使用できます。インターセプターは、各リクエストが送信される前に、自動的にトークンを追加します (または、その他の構成されたアクションを実行します)。

// pages/index.js
import React, { useEffect, useState } from 'react';
import axiosInstance from '../lib/axiosInstance';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axiosInstance.get('/products/1') // Replace with your API endpoint
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      {data ? (
        <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

) : (

Loading...

)}