You are not using the jwtToken for anything after passing it to the service.

Before the line const instance = axios.create(options); add something like this:

if (jwtToken !== null) {
  options.headers.Authorization = `Bearer ${jwtToken}`


In my NextJS begining I followed this tutorial , and I changed fetch to axios in this way:

export const getStaticPaths = async () => {
   const res = await fetch('');
   const data = await res.json();

   const paths = => {
     return {
       params: { id: },

   return {
     fallback: false,

export const getStaticProps = async (context) => {
   const id =;
   const res = await fetch(`${id}`);
   const data = await res.json();

   return {
     props: { ninja: data },

I applied the change using useEffect()

useEffect(() => {
    // const data = await fetch(`${id}`);
    // const res = await data.json();
    // setninja(res);
    const fetchData = async () => {
      const result = await axios(`${id}`);


  }, []);

I hope this info will be useful for you.


Your problem is that your async method does not return a promise.

import service from '../service'

export const getAllAccounts = async (adminToken) => {
  const res = service({ jwtToken : adminToken }).get(`/accounts`);
  return res;


Do not use Axios. Just use fetch().

Next.js polyfills fetch() by default on both the client and server, so you can just use it:

In addition to fetch() on the client-side, Next.js polyfills fetch() in the Node.js environment. You can use fetch() in your server code (such as getStaticProps/getServerSideProps) without using polyfills such as isomorphic-unfetch or node-fetch.


Related Query

More Query from same tag