How to use Axios in Next 13?

[NiazMorshed2007]

Summary

I have an external backend where from I'm consuming APIs to create my frontend.
In Next 12, I used to fetch and post data by creating an axios instance in core directory,,
and using that instance to create services for different api calls in services dir in my app,,

• axios Instance:

import axios from "axios";

const baseUrl = "http://127.0.0.1:1337/api";

export const http = axios.create({
  baseURL: baseUrl,
  headers: {
    "Content-Type": "application/json",
  },
});

http.interceptors.request.use(
  (config) => {
    config.headers.Authorization = `Bearer sometoken`;
    return config;
  },
  (err) => {
    throw new Error(err);
   // some action 
  }
);

I used the interceptors listen for api error, and if I get a unauthorized error I may run some function and block from accessing privtae routes.

---

Now my question is,

How can achieve the same result using axios in Next 13??

Here are a list of things I want some help:

1. How do I manage protected route in my app, if I'm using my own different backend
2. How do I get access to revalidating, caching etc that I used to get in fetch() function if I'm using axios
3. What is the recommended way to manage cookies to pass token in request header in axios

Let me know if I'm wrong with some of my assumptions and if some part are confusing.
Any resources like repo/blogs will be more helpful 🙏

Thanks!

Additional information

No response

Example

No response

[Cirilord]

You can use this code for you api file, works with client and server side:

import axios from 'axios'

const baseURL = process.env.NEXT_PUBLIC_API_URL
    , isServer = typeof window === 'undefined'

const api = axios.create({
    baseURL,
    headers: {
        'Content-Type': 'application/json'
    }
})

api.interceptors.request.use(async config => {

    if (isServer) {

        const { cookies } = (await import('next/headers'))
            , token = cookies().get('token')?.value

        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`
        }
    }
    else {

        const token = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/, '$1')

        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`
        }
    }

    return config
})

export default api

And for revalidation and cache, check this documentation for use both without fetch:
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#data-fetching-without-fetch

[WinmezzZ]

How to set cookie in server side in axios intercepter? It will cause an error "Error: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options"

my code

const setCookie = async (key: string, value: string) => {
  if (typeof window === 'undefined') {
    ('use server');
    const { cookies } = await import('next/headers');

    cookies().set({
      name: key,
      value,
      httpOnly: true,
      path: '/',
    });
  } else {
    document.cookie = key + '=' + value;
  }
};

[mtmotyka]

Same problem. I need to set new access and refresh token, but i can't use set aswell.

[codiku-dev]

I use 'ky' npm lib that seems to use fetch under the hood and give a axios feeling with a nice api, ( no need to double promise to get a json)

[leo7418]

Have you found a solution to this problem @WinmezzZ ? I'm currently facing the same issue and am desperate to find a solution.

[issam-seghir]

@WinmezzZ I have the same problem did you figure out any workaround?

[vuthanhtung172906]

In my opinion, I won't try to use axios for NextJS 13, because we can't access caching request, revalidating, pre-fetch, ... with Axios. So i recommend u, i have seen A NextJS 13 Course in Udemy, they use fetch for something data need to SEO, and axios for data no-need to SEO like Authentication, Authorization, Payment Request, ...

[FahdW]

I have a question in regards to that caching, let's say I am doing that fetching on the front end side of the next js app, does the same principles apply

[mhdkashif07]

I think you mean fetching on the client side so it doesn't affect the caching because it will make a request on every render of the page or component

[Tongyaoyu]

when i use axios in lient component ，it will show
Module not found: Can't resolve 'debug' in 'E:\projects\test\node_modules\follow-redirects' Did you mean './debug'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, E:\projects\test). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

[kamit6337]

Conclusion: You can use whatever you want either fetch() or axios() in Next JS, BUT the features on making fetch request like CACHING and REVALIDATING is not available in making request by axios.

Axios() can only be used to static data or dynamic data that will fetch at instance of making request.

This is all I concluded after reading some useful articles on this topic.

Thanks....

[codiku-dev]

I think it's a real red flag that nextjs has overwritten the default behaviour of fetch. Real anti pattern. The behaviour of a core library should behave as expected and not contain some magic. If I have an error during the fetch I can't find the issue on the official fetch doc...
And we are not free to use another library for fetch.

And we all know how fetch is not user friendly : Body to stringify, double promises to get a json response... Very verbose.

[codiku-dev]

I suggest using 'ky' that is using fetch under the hood so you still have access to the next property and the cache property.
And at the same time you have a 'axios like' api. Without the need to double promise to get a json response like with fetch.

[bim-oulabi]

The only problem with using ky that it has some issues when using non-latin characters :/ did you find any alternative or proper setup for ky please?

[befored1sappear]

what about options.next.tags when using axios?

[SouthLink]

I suggest you don't use axios in next.js, especially in SSR api like getServerSideProps, using axios under SSR API will result in 'oom' error, the performance metrics of the whole page will get worse and worse, and ultimately the page will become inaccessible, so we later used fetch

[suhaotian]

I think you are looking for this xior, a similar API to axios, many useful plugins built-in and based on fetch.

And this article may help you too, if you development SSR app: 3 Tips to Make Your Next.js App More Stable