I keep getting 504 issues when I try to make requests to an endpoint via next.js APIs as I need to get the auth tokens from the server side, add them to request headers and proxy it to another API that I know takes more than 10 seconds.
I tried various approaches and even after upgrading to a Pro plan on Vercel, it was not getting fixed. Turns out that on the Free plan, you have a maximum timeout for each "Page" for about 10 seconds and a base of about 30 seconds on the Pro Plan (and can be extended up to 5 minutes on the latest update) - https://vercel.com/changelog/serverless-functions-can-now-run-up-to-5-minutes
Instead of placing export const maxDuration = 300 on the API route file, placing it on the page.tsx where the request is being made helped solve this problem.