How to implement Axios Request Interceptors in Next.js

Axios is a widely used JavaScript library that makes it easier to send HTTP requests to servers. One of its standout features is the interceptor, which allows our app to catch requests and responses. Axios interceptors let us set up functions that run for each request or response before they reach the application. This is helpful for tasks like adding authentication tokens, logging, and handling errors globally, making our code cleaner and easier to manage.

In this blog post, we’ll learn how to implement Axios request interceptors in a Next.js application. We’ll start by setting up Axios, and then we’ll see how to create and use request and response interceptors. By the end, you’ll know how to use interceptors to improve your application and keep your code organized.

Setup the Project

Before diving into how to implement Axios request interceptors in a Next.js application, make sure you have the following:

• Node.js and npm/yarn Installed: Ensure you have Node.js and npm (or yarn) installed on your machine. You can download Node.js from here.

• A Next.js Project Setup: You should have a Next.js project setup. If you don’t have one, you can create a new Next.js project using Create Next App:
  

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

or

yarn add axios

Implementing Request Interceptors

Request interceptors in Axios let you modify requests before they reach the server. They’re useful for adding authentication tokens, setting custom headers, or logging requests. Here’s how to implement Axios request interceptors in a Next.js application.

Step 1: Create an Axios Instance

Create a new file axiosInstance.js in the lib folder (or any preferred location in your project). You can add a request interceptor to the Axios instance you created earlier. This interceptor will be executed before every request is sent out.

Creating an Axios instance allows you to set default configurations, such as the base URL and headers, that will be applied to all requests made with that instance. This helps in keeping your code DRY (Don’t Repeat Yourself).

Create a new file named axiosInstance.js in your lib folder and set up your Axios instance:

// 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;

Here’s a summary of what we’ve done:

• Created an Axios instance using axios.create().
• Set the baseURL to the base URL of your API. You can adjust this to match your API’s configuration.
• Used interceptors.request.use() to intercept and modify outgoing requests. This allows us to add headers, authentication tokens, or make other changes to the request configuration.

Step 2: Use the Axios Instance in Next.js Pages or Components

With the request interceptor set up, you can use the Axios instance in your Next.js pages or components as usual. The interceptor will automatically add the token (or perform any other configured actions) before each request is sent.

// 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...

)}

); }

Copy after login

Step 3: Customizing the Interceptor

You can customize the request interceptor to perform other actions as needed. For example, you might want to log the details of each request:

axiosInstance.interceptors.request.use(
  function (config) {
    // Log the request details
    console.log('Request:', config);
    return config;
  },
  function (error) {
    // Handle the error
    return Promise.reject(error);
  }
);

This setup will log the details of each request to the console, which can be helpful for debugging purposes.

By implementing request interceptors in your Next.js application, you can ensure that all requests are consistently modified or enhanced before they are sent, improving the maintainability and functionality of your code.

Implementing Response Interceptors

Similar to how request interceptors allow you to modify outgoing requests, response interceptors in Axios enable you to manage responses globally before they reach your application code. This is especially helpful for tasks such as error handling, response transformation, and logging. Let’s explore how to implement response interceptors in a Next.js application using Axios.

Step 1: Create the Response Interceptor

In your axiosInstance.js file, you can add a response interceptor to the Axios instance you created. This interceptor will be executed after every response is received.

// 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
    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);
  }
);

// Add a response interceptor
axiosInstance.interceptors.response.use(
  function (response) {
    // Do something with the response data
    console.log('Response:', response);
    return response;
  },
  function (error) {
    // Handle the response error
    if (error.response && error.response.status === 401) {
      // Handle unauthorized error
      console.error('Unauthorized, logging out...');
      // Perform any logout actions or redirect to login page
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

Step 2: Use the Axios Instance in Next.js Pages or Components

With the response interceptor set up, you can use the Axios instance in your Next.js pages or components as usual. The interceptor will automatically handle responses and errors based on your configuration.

// pages/index.js
import { 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...

)}

); }

Copy after login