When I first started building with Next.js, I kept switching between fetch and Axios for API calls. I quickly learnt that using Axios isn’t bad per se—but how and where you use it in Next.js matters. In this post I’ll walk you through how I’ve used Axios in both server and client components in Next.js — covering GET, POST, error handling, and explaining the key differences you’ll hit between SSR and CSR. If you’re a web dev, React/Next.js dev or someone who uses Axios regularly, you’ll find this a useful, practical guide.

What you’ll get from this post

- How I set up Axios in a Next.js app (both server side and client side) - GET and POST examples with Axios in Next.js - Error-handling best practices and tips - Differences between SSR (Server Side Rendering) / CSR (Client Side Rendering) when using Axios - Clear code snippets + commentary for web devs, React/Next.js devs & Axios users

Why use Axios in Next.js? (And when you might not)

I like Axios because: - It handles automatic JSON conversion (you don’t always have to call response.json()). - It supports interceptors (so you can attach global headers / token logic) - It works equally in browser and Node.js (so useful when you fetch server-side) - It makes POST/PUT/DELETE requests a bit cleaner in many cases That said: when you’re using Next.js’s built-in fetch (especially in its newer App Router/server components), you get built-in caching, revalidation and other features which Axios doesn’t automatically support. My takeaway: Use Axios where it makes developer experience significantly better (especially on the client). But on the server side you’ll need to be aware of how Next.js handles rendering/data fetching, and sometimes going with native fetch is more aligned with Next.js features.

Setting up Axios in Next.js

Here’s how I set it up in a file called lib/apiClient.js (or .ts if you use TypeScript):


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

const apiClient = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || 'https://api.example.com',
  headers: {
    'Content-Type': 'application/json',
  },
  // optional: timeout, etc
  timeout: 10000,
});

// Optional: add interceptor for errors / token
apiClient.interceptors.response.use(
  response => response,
  error => {
    // you can log error, send to a service, show custom message
    return Promise.reject(error);
  }
);
export default apiClient;

With that in place, anywhere in your code you can import apiClient from '../lib/apiClient' and use it.

Example: GET request

a) In a client component (CSR)

'use client';
import { useEffect, useState } from 'react';
import apiClient from '../lib/apiClient';

function UsersList() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await apiClient.get('/users');
        setUsers(response.data);
      } catch (err) {
        console.error('Error fetching users:', err);
        setError(err);
      }
    };
    fetchUsers();
  }, []);
  if (error) return <div>Error loading users.</div>;
  if (!users.length) return <div>Loading…</div>;

  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name} – {u.email}</li>
      ))}
    </ul>
  );
}
export default UsersList;

b) In a server component or via SSR (Server Side Rendering) If you’re using Next.js pages or the newer App Router in server component form:


// pages/users.js (pages directory)
import apiClient from '../lib/apiClient';

export async function getServerSideProps() {
  try {
    const response = await apiClient.get('/users');
    return {
      props: {
        users: response.data,
      },
    };
  } catch (err) {
    console.error('Error fetching users on server:', err);
    return {
      props: {
        users: [],
        error: 'Failed to fetch users',
      },
    };
  }
}

export default function UsersPage({ users, error }) {
  if (error) return <div>{error}</div>;
  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name} – {u.email}</li>
      ))}
    </ul>
  );
}

Key point: When you fetch on the server, you’re doing it before rendering the page to the client, so you benefit from SEO and initial page load with data.

Example: POST request

Client side POST (user form submission)


'use client';

import { useState } from 'react';
import apiClient from '../lib/apiClient';
function CreatePostForm() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [status, setStatus] = useState('');
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await apiClient.post('/posts', { title, body });
      setStatus('Post created with ID: ' + response.data.id);
    } catch (err) {
      console.error('Error creating post:', err);
      setStatus('Error creating post');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Title" />
      <textarea value={body} onChange={e => setBody(e.target.value)} placeholder="Body" />
      <button type="submit">Create Post</button>
      <div>{status}</div>
    </form>
  );
}
export default CreatePostForm;

POST from server side (e.g., a server route handler) If you’re using Next.js API routes:


// pages/api/create-post.js
import apiClient from '../../lib/apiClient';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }
  try {
    const { title, body } = req.body;
    const response = await apiClient.post('/posts', { title, body });
    return res.status(201).json(response.data);
  } catch (err) {
    console.error('Server side post error:', err);
    return res.status(500).json({ error: 'Failed to create post' });
  }
}

Error handling tips

- Always wrap your Axios calls in try/catch and log the error details — the error.response object often holds status/error payloads. - In interceptors (in your apiClient setup) you can centralise behaviours (for example: if 401 Unauthorized, redirect to login; if 500, show a friendly message). - On server side (SSR) make sure you fallback gracefully if data fails (for example render an error UI or return empty props). - On client side, show loading states, error states, and avoid UI blankness. - Set a sensible timeout in Axios (to avoid requests hanging forever) and handle canceled requests if component unmounts.

Conclusion

So there you have it — my take on using Axios in Next.js the right way (well, the way that works for me and many devs). While Axios remains a powerful HTTP client with many perks, in a Next.js environment you do need to be aware of whether you’re in a server-context or a client-context — and whether you’re leveraging Next.js’s full data-fetching features. For client components and interactivity I often still use Axios. For server components or SSR that need caching, revalidation and optimal SEO, I sometimes default to native fetch. At the end of the day: use the tool that fits your use-case, keep your code clean, handle errors well — and your Next.js + Axios integration will hum along nicely.

How to use Axios with Next.js: The Right Way to Fetch Data