Next.js & Axios: A Beginner's Guide To HTTP Requests

In the world of web development, fetching data from APIs is a daily necessity. Whether you’re building a simple blog or a complex e-commerce platform, you’ll inevitably need to communicate with external servers to retrieve information. That’s where HTTP requests come in, and in the context of Next.js, a popular choice for handling these requests is the Axios library. This tutorial will guide you through the process of using Axios in your Next.js projects, making it easy for beginners and intermediate developers to grasp the concepts and implement them effectively.

Why Axios?

While the built-in fetch API is available in modern browsers and can be used for making HTTP requests, Axios offers several advantages that make it a preferred choice for many developers:

Browser Support: Axios works in all modern browsers, and also in Node.js, providing a consistent experience across different environments.
Request Interceptors: Axios allows you to intercept and modify requests before they are sent, which is useful for tasks like adding authentication headers.
Response Interceptors: Similarly, you can intercept and modify responses before they are handled by your application, which is great for error handling and data transformation.
Automatic Transformation: Axios automatically transforms JSON data, eliminating the need to manually parse the response.
Error Handling: Axios provides more robust error handling capabilities, making it easier to catch and manage errors.
Cancellation: You can cancel requests if they are no longer needed, which can improve performance and user experience.

These features, along with its ease of use and widespread adoption, make Axios a powerful and convenient tool for handling HTTP requests in your Next.js applications.

Setting Up Your Next.js Project

Before we dive into the code, let’s make sure you have a Next.js project set up. If you don’t already have one, you can create a new project using the following command:

npx create-next-app@latest my-axios-app

Navigate into your project directory:

cd my-axios-app

Next, install Axios using npm or yarn:

npm install axios

yarn add axios

Now, your Next.js project is ready to use Axios. Let’s start with a simple example.

Making GET Requests

The most common type of HTTP request is a GET request, used to retrieve data from a server. Here’s how you can make a GET request using Axios in Next.js:

Create a new file called pages/index.js (or modify the existing one) and add the following code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function HomePage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
        setData(response.data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Todo Item</h1>
      <p><b>Title:</b> {data.title}</p>
      <p><b>Completed:</b> {data.completed ? 'Yes' : 'No'}</p>
    </div>
  );
}

export default HomePage;

In this example:

We import the axios library.
We use the useState hook to manage the data, loading state, and any potential errors.
The useEffect hook is used to perform the data fetching when the component mounts.
Inside useEffect, we define an asynchronous function fetchData.
We use axios.get() to make a GET request to the provided API endpoint (a sample API for todos).
The response data is then set using setData().
We use a try...catch...finally block to handle any errors during the request.
Finally, we render the data, a loading message, or an error message based on the component’s state.

To run the application, execute:

npm run dev

yarn dev

and open your browser at http://localhost:3000.

Making POST Requests

POST requests are used to send data to the server, typically to create or update resources. Here’s how to make a POST request using Axios:

Create a new component or modify the existing one. For example, modify pages/index.js:

import React, { useState } from 'react';
import axios from 'axios';

function HomePage() {
  const [title, setTitle] = useState('');
  const [completed, setCompleted] = useState(false);
  const [message, setMessage] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await axios.post('https://jsonplaceholder.typicode.com/todos', {
        title: title,
        completed: completed,
        userId: 1,
      });
      setMessage(`Todo created with ID: ${response.data.id}`);
      setTitle('');
      setCompleted(false);
    } catch (error) {
      setMessage(`Error creating todo: ${error.message}`);
    }
  };

  return (
    <div>
      <h1>Create Todo</h1>
      
        <div>
          <label>Title:</label>
           setTitle(e.target.value)}
          />
        </div>
        <div>
          <label>Completed:</label>
           setCompleted(e.target.checked)}
          />
        </div>
        <button type="submit">Create Todo</button>
      
      {message && <p>{message}</p>}
    </div>
  );
}

export default HomePage;

In this example:

We create a form with input fields for the todo title and a checkbox for the completed status.
The handleSubmit function is called when the form is submitted.
Inside handleSubmit, we use axios.post() to make a POST request to the API endpoint.
We send the form data as the request body.
We handle the response and display a success or error message.

Adding Request Headers

Sometimes, you need to send custom headers with your requests, such as authentication tokens or content type information. Here’s how to do it with Axios:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function HomePage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data', {
          headers: {
            'Authorization': 'Bearer YOUR_AUTH_TOKEN',
            'Content-Type': 'application/json',
          },
        });
        setData(response.data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Data</h1>
      {/* Render your data here */}
    </div>
  );
}

export default HomePage;

In this code snippet, we’ve added a headers object to the axios.get() options. This object contains the custom headers we want to send with the request. Replace 'Bearer YOUR_AUTH_TOKEN' with your actual authentication token.

Handling Errors

Error handling is crucial when making HTTP requests. Axios provides several ways to handle errors:

try...catch Blocks: The most common way to handle errors is to use a try...catch block, as shown in the previous examples. This allows you to catch any errors that occur during the request.
Error Properties: When an error occurs, Axios provides several properties on the error object that can help you understand the problem:

error.message: A user-friendly error message.
error.response: The HTTP response object, which contains information about the error, such as the status code, headers, and data.
error.code: A string representing the error code.
error.config: The configuration of the request that caused the error.

Response Status Codes: Check for specific HTTP status codes to handle different types of errors (e.g., 400 Bad Request, 401 Unauthorized, 404 Not Found, 500 Internal Server Error).

Example of error handling using the response status code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function HomePage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
      } catch (err) {
        if (err.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(err.response.data);
          console.log(err.response.status);
          console.log(err.response.headers);
          setError(`Request failed with status ${err.response.status}`);
        } else if (err.request) {
          // The request was made but no response was received
          // `err.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(err.request);
          setError('No response received from the server');
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log('Error', err.message);
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Data</h1>
      {/* Render your data here */}
    </div>
  );
}

export default HomePage;

Using Interceptors

Axios interceptors allow you to intercept and modify requests before they are sent and responses before they are handled. This is extremely useful for tasks like adding authentication headers, logging requests, and handling errors globally.

Request Interceptors:

import axios from 'axios';

// Add a request interceptor
axios.interceptors.request.use(
  (config) => {
    // Do something before request is sent
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  (error) => {
    // Do something with request error
    return Promise.reject(error);
  }
);

In this example, we’re adding an Authorization header to every request before it’s sent. The token is fetched from local storage, but you could fetch it from anywhere. This is useful for authentication.

Response Interceptors:

import axios from 'axios';

// Add a response interceptor
axios.interceptors.response.use(
  (response) => {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  },
  (error) => {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    if (error.response.status === 401) {
      // Handle unauthorized errors, e.g., redirect to login
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

In this example, we’re checking for 401 (Unauthorized) errors and redirecting the user to the login page. This allows you to handle authentication errors globally.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when using Axios, and how to avoid them:

Incorrect API Endpoint: Double-check the API endpoint URL. Typos or incorrect URLs are a common source of errors.
Missing or Incorrect Headers: Ensure you’re sending the correct headers, especially Content-Type and Authorization.
Asynchronous Operations: Remember that axios.get() and axios.post() are asynchronous. Use async/await or .then() and .catch() to handle the responses and errors correctly.
Incorrect Data Format: When sending data in a POST request, make sure the data is formatted correctly (e.g., JSON). Set the Content-Type header to application/json.
CORS Issues: If you’re making requests to a different domain, you might encounter CORS (Cross-Origin Resource Sharing) issues. Configure CORS on your server to allow requests from your domain.

Key Takeaways

Axios is a popular and versatile library for making HTTP requests in Next.js.
It provides a clean and easy-to-use API for GET, POST, and other HTTP methods.
Axios offers features like request and response interceptors, automatic JSON transformation, and robust error handling.
You can add request headers for authentication and other purposes.
Always handle errors properly using try...catch blocks and check for specific HTTP status codes.

FAQ

Q: How do I handle different HTTP methods (PUT, DELETE, PATCH) with Axios?

A: Axios provides methods for all standard HTTP methods:

axios.put(url, data, config)
axios.delete(url, config)
axios.patch(url, data, config)

The usage is similar to axios.get() and axios.post(); just replace the method name.

Q: How can I cancel an Axios request?

A: You can cancel a request using an AbortController:

import axios from 'axios';

const controller = new AbortController();

axios.get('https://api.example.com/data', { signal: controller.signal })
  .then(response => {
    // Handle success
  })
  .catch(error => {
    // Handle error
  });

// To cancel the request:
controller.abort();

Q: How do I send data in a GET request?

A: You can send data in a GET request using query parameters. Axios automatically serializes the data into the query string:

axios.get('https://api.example.com/data', { params: { key1: 'value1', key2: 'value2' } })
  .then(response => {
    // Handle success
  });

Q: How do I use Axios in a Next.js server-side component?

A: You can use Axios in server-side components by importing it and using it within your server-side functions. Keep in mind that server-side components run on the server, so you won’t have access to browser-specific APIs like localStorage directly.

Q: What are the differences between Axios and fetch in Next.js?

A: Both Axios and the Fetch API can be used to make HTTP requests in Next.js. However, Axios offers several advantages, including better browser support, request and response interceptors, automatic JSON transformation, and more robust error handling. Fetch is a built-in browser API, so it doesn’t require an external library, which can be advantageous for smaller projects or when you want to avoid adding dependencies. However, for most projects, Axios’s added features and ease of use make it a more attractive option.

Mastering Axios in your Next.js projects opens up a world of possibilities for interacting with APIs and building dynamic, data-driven applications. By understanding the core concepts, from making simple GET and POST requests to handling errors and using interceptors, you’ll be well-equipped to tackle any data-fetching challenge. Remember to always handle errors gracefully, choose the right HTTP methods for your tasks, and keep in mind the potential pitfalls like CORS issues. With practice and a solid grasp of these principles, you’ll be building robust and efficient Next.js applications in no time.

Next.js & Axios: A Beginner’s Guide to HTTP Requests

Why Axios?

Setting Up Your Next.js Project

Making GET Requests

Making POST Requests

Adding Request Headers

Handling Errors

Using Interceptors

Common Mistakes and How to Fix Them

Key Takeaways

FAQ

More posts

TypeScript Tutorial: Building a Simple Interactive Drawing Application

TypeScript Tutorial: Building a Simple Interactive Form with Validation

TypeScript Tutorial: Building a Simple Game of Tic-Tac-Toe

TypeScript Tutorial: Building a Simple Currency Converter