Sometimes you want to change requests being made to the end API, add Authorization and other elements.

We needed to add it because our final API was expecting to receive a Bearer token from the client, but we don’t want Client side code to have access to the token. We use the Proxy Server as a middleware to all requests to set the Bearer token via httpOnly Cookies.

Create a route to catch all calls to the api 

Create a mapping between the requests to the final API and Next.js API. In our case the paths are exactly the same, just change the hostname.

import axios, {AxiosError} from 'axios';

const FINAL_HOST = //your final api host
const COOKIE_KEY = //your cookie key that contains the token

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  return APINodeClient({
    url: req.url.replace(/^\/api/, FINAL_HOST),
    method: req.method,
    data: req.body,
    headers:{
		  authorization: `Bearer ${req.cookies[COOKIE_KEY]}`
		}
  })
  .then((response) => {
    res.status(response.status).json(response.data);
  })
}

Using Next.js API as Proxy Server