Blog

Next.js 14 introduced a new app structure, which provides a more streamlined and efficient way of building applications. In this article, we will explore how to use Axios, a popular JavaScript library for making HTTP requests, in a Next.js 14 project with the new app structure.

Setting Up Axios in Next.js 14

To use Axios in a Next.js 14 project, you need to install it first. Run the following command in your terminal:

npm install axios

Once installed, you can import Axios in your Next.js pages or components. However, to make Axios available throughout your application, you can create a separate module for it.

Create a new file lib/axios.js with the following content:

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com', // Replace with your API base URL
});

export default api;

This will create a new instance of Axios with a base URL for your API.

Using Axios in Next.js Pages

To use Axios in a Next.js page, you can import the api instance from the lib/axios.js file. Here’s an example of how to use Axios in a page:

// app/page.js
import api from '../lib/axios';

export async function Page() {
  const response = await api.get('/data');
  const data = response.data;

  return (
    <div>
      <h1>Data from API</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Page;

In this example, we’re using Axios to fetch data from the API and render it on the page.

Using Axios with Server Components

One of the new features in Next.js 14 is server components, which allow you to render components on the server-side. To use Axios with server components, you can use the fetch hook provided by Next.js.

Here’s an example of how to use Axios with server components:

// app/page/server.js
import { fetch } from 'next/dynamic';
import api from '../../lib/axios';

export async function Page() {
  const response = await api.get('/data');
  const data = response.data;

  return (
    <div>
      <h1>Data from API</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Page;

However, if you want to use the fetch hook provided by Next.js, you can do so by importing it dynamically:

// app/page/server.js
import dynamic from 'next/dynamic';
const fetch = dynamic(() => import('next/fetch'), { ssr: true });

export async function Page() {
  const response = await fetch('/api/data');
  const data = await response.json();

  return (
    <div>
      <h1>Data from API</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Page;

Handling Errors with Axios

When using Axios, it’s essential to handle errors that may occur during the request. You can use the try-catch block to catch any errors that may occur:

// app/page.js
import api from '../lib/axios';

export async function Page() {
  try {
    const response = await api.get('/data');
    const data = response.data;

    return (
      <div>
        <h1>Data from API</h1>
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  } catch (error) {
    if (axios.isAxiosError(error)) {
      return (
        <div>
          <h1>Error: {error.message}</h1>
        </div>
      );
    } else {
      throw error;
    }
  }
}

export default Page;

In this example, we’re using the try-catch block to catch any errors that may occur during the request. If the error is an Axios error, we’re rendering an error message on the page. Otherwise, we’re re-throwing the error.

Conclusion

In this article, we’ve explored how to use Axios in a Next.js 14 project with the new app structure. We’ve covered setting up Axios, using Axios in Next.js pages, using Axios with server components, and handling errors with Axios. By following these steps, you can easily integrate Axios into your Next.js project and start making API requests.