Next-Auth + next-intl breaks fetch('/api')

[Arce0406]

I am using Next.js 13.

When using Next-Auth with Next.js 13, we will need a Route Handlers at the following paths
/app/api/auth/[.... .nextauth]/route.ts

At the same time, we also need to set the middleware.ts

When we use both Next-Auth and next-intl, the setup becomes more complicated, but there is an official tutorial and example that shows us how to do it.
Next.js 13 middleware for i18n routing
Sample from amannn

But I've seen very few explanations of this problem below, and I'm not sure if it's just my way of setting things up that's wrong, or if everyone else has figured out a way to solve this problem.

Here is my problem：
I am using Next-Auth with next-intl (App Router (Server Components))
The folder structure is
src/app/[locale]

1. src/app/[locale]/api
   If we put app/api into app/[locale]/api, then the general API will work e.g. fetch('/api/test') .
   But it will cause next-auth's authentication api /app/[locale]/api/auth/[...nextauth].ts failed.
   You will not be able to use the signin or signout function.

2. src/app/api
   If we use app/api, then next-auth's authentication api /app/api/auth/[...nextauth].ts works fine,
   But normal api requests fetch('/api/test') may fail due to a change in language that causes the URL to change fetch('/api/[locale]/test').
   Of course, I can fix it by doing the following, but I doubt if this is a good way.

  const host = headers().get("host");
  const protocal = process?.env.NODE_ENV === "development" ? "http" : "https";
  const res = await fetch(`${protocal}://${host}/api`);

Has anyone else had this problem? How did you solve it?
I'd like to find a solution where the folder structure looks like the following and both Next-Auth and Fetch work properly.
src/app/[locale]
src/app/api