How Next.js 13 Made Me Rethink Axios and Build Traxios: Creating an HTTP Client from Scratch for Tractian

Introduction

When Next.js 13 introduced new capabilities to the native fetch API, it broke the way we used Axios in our web projects at Tractian. This is the story of how I identified the problem, led the creation of a new HTTP client—Traxios—and how this decision positively impacted our team and delivery.

Situation

At Tractian, our web team relied heavily on Axios for all HTTP requests. Axios provided a familiar, ergonomic API, interceptors, and instance management, making it a staple in our codebase. However, with the release of Next.js 13, the native fetch API was extended with new options like cache and next, enabling advanced caching and revalidation strategies crucial for modern SSR/SSG applications.

Unfortunately, Axios did not support these Next.js-specific fetch options. Using Axios meant losing out on powerful Next.js features, while switching to the native fetch API would require significant refactoring and loss of developer productivity due to its less friendly interface.

Task

The challenge was clear:
How could we keep the developer experience and productivity of Axios, while leveraging the new fetch capabilities introduced by Next.js 13?

I needed to provide a solution that:

• Preserved the familiar Axios-like API for the team.
• Allowed full use of Next.js's fetch enhancements (e.g., cache, revalidate).
• Minimized disruption and learning curve for ongoing and future projects.
• Centralized and standardized HTTP logic for maintainability and scalability.

Action

After discussing the problem with stakeholders and the team, I proposed building a new HTTP client from scratch—Traxios—inspired by Axios but powered by the native fetch API.

Key Steps:

1. Designing the API:
   I modeled Traxios's API to closely resemble Axios, including support for instances, interceptors, and typed responses, so the team could transition with minimal friction.

2. Leveraging TypeScript:
   The client was built with TypeScript from the ground up, ensuring type safety and a great developer experience.

3. Supporting Next.js Features:
   Traxios passes all configuration options directly to fetch, including Next.js-specific options like cache and next, unlocking the full power of the framework.

4. Maintaining Familiar Patterns:
   I implemented request/response interceptors and instance creation, so existing patterns and middleware could be reused.

5. Documentation and Onboarding:
   I wrote clear documentation and migration guides, and provided support to the team during the transition.

Example Usage

import { traxios } from 'traxios'

// Creating an instance with Next.js-specific options
const api = traxios.create({
  baseUrl: 'https://api.example.com',
  cache: 'force-cache',
  next: { revalidate: 3600 }
})

// Making a GET request
api.get('/data').then(response => {
  console.log(response.data)
})

Result

The introduction of Traxios had a significant positive impact on our team and projects:

• Seamless Migration:
  The team was able to migrate from Axios to Traxios with minimal code changes, thanks to the familiar API.

• Full Next.js Compatibility:
  We could now leverage all the advanced fetch features in Next.js 13+, improving our caching strategies and overall app performance.

• Increased Productivity:
  Developers continued to use interceptors, instances, and other patterns they were used to, without having to learn the quirks of the native fetch API.

• Centralized HTTP Logic:
  All HTTP requests were standardized, making the codebase easier to maintain, test, and evolve.

• Faster Feature Delivery:
  With the right tools in place, our team delivered new features and improvements faster, without being blocked by technical limitations.

Conclusion

Building Traxios was not just a technical solution—it was a strategic move that empowered our team to keep moving fast, adopt new platform features, and maintain high code quality.

Note: Traxios is a private, proprietary solution developed for Tractian, and the code is not publicly available.

And you, how did you handle this challenge with the latest versions of Next.js?
Share your experience or thoughts in the comments!