How to use Axios in Next 13? #49950
Replies: 9 comments 7 replies
-
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: |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
when i use axios in lient component ,it will show |
Beta Was this translation helpful? Give feedback.
-
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.... |
Beta Was this translation helpful? Give feedback.
-
I suggest using 'ky' that is using fetch under the hood so you still have access to the next property and the cache property. |
Beta Was this translation helpful? Give feedback.
-
what about options.next.tags when using axios? |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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 |
Beta Was this translation helpful? Give feedback.
-
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,,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:
revalidating
,caching
etc that I used to get infetch()
function if I'm using axiosLet 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
Beta Was this translation helpful? Give feedback.
All reactions