已解决！！：

原来使用测试版turbopack会导致这个bug的发生。我已经打开了一个问题，我们将看到当他们解决这个问题。

提问：

我最近开始在NextJS 13中使用新的应用程序目录进行一个项目。我实现了Prisma并连接了我的MySQL数据库，然后安装了next-auth。用户创建和JWT安全性都很好，但是当登录并转到由我的中间件保护的路由时，从next-auth目录导出，浏览器开始循环无限数量的GET请求（见下图），并使网站无响应。它还会返回以下错误：
“无法获取RSC有效负载。返回浏览器导航。TypeError：尝试获取资源时发生NetworkError。”

注意：

删除middleware.ts文件显然会删除路由保护，但也会消除GET循环。
如果有更多的数据，我可以提供帮助，请让我知道。

图片：

验证码：

projectDir\app\API\auth[...nextauth]\route.ts

// Imports
import NextAuth from "next-auth/next";
import prisma from "@/lib/prisma";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import CredentialsProvider from "next-auth/providers/credentials";
import { type NextAuthOptions } from "next-auth";

// NextAuth handler.
export const authOptions: NextAuthOptions = {
    // Set adapter.
    adapter: PrismaAdapter(prisma),
    // Set secret.
    secret: process.env.NEXTAUTH_SECRET,
    // Set session strategy.
    session: {
        strategy: 'jwt'
    },
    // Set different login providers.
    providers:[  
        CredentialsProvider({
            // The name to display on the sign in form (e.g. "Sign in with...")
            name: "Credentials",
            // `credentials` is used to generate a form on the sign in page.
            // You can specify which fields should be submitted, by adding keys to the `credentials` object.
            // e.g. domain, username, password, 2FA token, etc.
            // You can pass any HTML attribute to the <input> tag through the object.
            credentials: {
            username: { label: "Email", type: "text", placeholder: "user@email.com" },
            password: { label: "Password", type: "password" }
            },
            async authorize(credentials) {
                // Create request to login api
                const res = await fetch("http://localhost:3000/api/login", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        username: credentials?.username,
                        password: credentials?.password,
                    }),
                });

                // Get response from request
                const user = await res.json();
            
                if (res.ok && user) {
                    // If request returns an user, return the user object received.
                    return user
                } else {
                    // If request does not return an user, return null.
                    return null
            
                    // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
                }
            }
        })
    ],
    callbacks: {
        // Callback for when a jwt is created or updated.
        async jwt({token, user}) {

            return({...token,...user});
        },

        // Callback for when a session is checked.
        async session({session, token}) {
            // Add token to session.
            session.user = token as any;

            return session;
        }
    }
}

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST}

projectDir\middleware.ts

export { default } from 'next-auth/middleware'

export const config = {
    matcher: "/settings"
}

projectDir\app\API\login\route.ts

// Imports
import { signJwtAccessToken } from "@/lib/jwt";
import prisma from "@/lib/prisma";
import * as bcrypt from 'bcryptjs';

// Interface
interface RequestBody {
    username: string;
    password: string;
}

// Return route.
export async function POST(request: Request) {
    // Get requests body.
    const body: RequestBody = await request.json();

    // Create const with requested user.
    const user = await prisma.user.findFirst({
        where: {
            email: body.username,
        }
    });

    // If user exists check if password is correct and return the user.
    if(user && ( await bcrypt.compare(body.password, user.password))) {
        // Remove password from user object in the response.
        const {password, ...userWithoutPass} = user

        // Create jwt.
        const accessToken = signJwtAccessToken(userWithoutPass);

        // Combine user with jwt as result.
        const result = {
            ...userWithoutPass,
            accessToken,
        }

        // Return the result as JSON object.
        return new Response(JSON.stringify(result));
    }

    // Return null as JSON object.
    else return new Response(JSON.stringify(null));
}

projectDir\app\lib\jwt.ts

// Imports
import jwt,{ JwtPayload } from "jsonwebtoken";

// Interfaces
interface SignOption {
    expiresIn?: string | number,
}

// Default token expiration date.
const DEFAULT_SIGN_OPTION:SignOption={
    expiresIn: "1h"
}

// Function to create jwt.
export function signJwtAccessToken(payload: JwtPayload, options: SignOption= DEFAULT_SIGN_OPTION) {
    // Get secret key.
    const secret_key = process.env.SECRET_KEY;

    // Create token.
    const token = jwt.sign(payload, secret_key!, options);

    // Return the token.
    return token;
}

// Function to verify jwt.
export function verifyJwt(token: string) {
    try {
        // Get secret key.
        const secret_key = process.env.SECRET_KEY; 
        // Verify secret key.
        const decoded = jwt.verify(token, secret_key!);

        // Return if jwt is valid 
        return decoded as JwtPayload;
    } catch (error) {
        // If jwt is not valid, log the error.
        console.log(error);

        // And return null.
        return null;
    }
}

我所尝试的

我尝试了以下方法，但没有成功。它们都导致了同样的问题。

• 不同库的不同版本，例如降级next js /降级next-auth。
• 从route.ts文件中删除自定义登录路由并使用预定义的用户。
• 正在删除回调。
• 尝试在其他页面上使用中间件，然后/设置。
• 重新安装node_modules。