Next.js13中Next-Auth与next-intl共存致fetch请求异常的解决方案咨询

核心原则 #

Next-Auth 的认证接口必须放在根目录的src/app/api/auth/下，因为它的会话管理、signIn()/signOut()函数默认依赖固定的/api/auth路径，放在 locale 动态路由下会破坏其内部逻辑。普通 API 的路径问题可以通过以下两种方案解决，同时保持src/app/[locale]的项目结构。

方案一：普通 API 放在根目录，用绝对路径请求 #

步骤 #

1. 放置 Next-Auth 接口：将[...nextauth].ts放在src/app/api/auth/下，确保认证功能正常运行。
2. 放置普通 API：将所有普通接口（如test.ts）放在src/app/api/下。
3. 修改 API 请求方式：在组件中请求 API 时，使用绝对路径而非相对路径。可以通过环境变量配置站点 base URL：
   • 在.env.local中添加：

     NEXT_PUBLIC_BASE_URL=http://localhost:3000
     

   • 请求示例：

     // 正确：使用绝对路径跳过 locale 前缀
     fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/test`)
       .then(res => res.json())
       .then(data => console.log(data));
     

方案二：普通 API 放在[locale]/api下，适配 Next-Auth 路径 #

步骤 #

1. 放置 Next-Auth 接口：依然将[...nextauth].ts放在根目录src/app/api/auth/下。
2. 放置普通 API：将普通接口放在src/app/[locale]/api/下（如src/app/[locale]/api/test.ts）。
3. 配置 Next-Auth 固定路径：在 Next-Auth 配置文件中明确指定认证页面的根路径，避免受 locale 路由影响：

   // src/app/api/auth/[...nextauth].ts
   import NextAuth from "next-auth";
   import CredentialsProvider from "next-auth/providers/credentials";
   
   export default NextAuth({
     providers: [
       CredentialsProvider({
         credentials: {},
         async authorize(credentials) {
           // 自定义认证逻辑示例
           return { id: "1", name: "Test User" };
         },
       }),
     ],
     // 强制使用根路径的认证页面
     pages: {
       signIn: "/api/auth/signin",
       signOut: "/api/auth/signout",
     },
     session: { strategy: "jwt" },
   });
   

4. 请求普通 API：在[locale]下的组件中使用相对路径请求，会自动带上当前 locale 前缀：

   // 正确：相对路径会自动拼接当前 locale，如 /en/api/test
   fetch("api/test")
     .then(res => res.json())
     .then(data => console.log(data));
   

问题根源解释 #

1. Next-Auth 放在 locale 路由下失效：Next-Auth 的会话管理依赖固定的/api/auth路径，动态 locale 前缀（如/en/api/auth）会导致它无法正确识别会话上下文，且signIn()/signOut()函数默认请求根路径的认证接口，不会自动带上 locale 前缀，因此请求失败。
2. 根目录 API 用相对路径请求失败：App Router 中，相对路径是相对于当前路由的。如果当前路由是/en，相对路径api/test会被解析为/en/api/test，而根目录 API 的实际路径是/api/test，因此匹配失败。

内容的提问来源于stack exchange，提问作者Arce