Next.js에서 Axios 요청 인터셉터를 구현하는 방법

Axios는 HTTP 요청을 서버에 더 쉽게 보낼 수 있도록 해주는 널리 사용되는 JavaScript 라이브러리입니다. 눈에 띄는 기능 중 하나는 앱이 요청과 응답을 포착할 수 있게 해주는 인터셉터입니다. 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...

)}