我正在学习next.js，但我在身份验证中遇到了一个错误。我在我的next.js应用程序中创建了一个登录表单（localhost：3000/login），在成功提交凭据后，它应该重定向到localhost：3000/dashboard。但我不知道凭据是否错误，这不应该是这样，因为为了测试，我只是添加了admin作为用户名和密码，但我仍然没有被重定向
我试图修剪用户名的任何空格，如果有任何输入，但仍然无济于事，我也试图找到我的凭据console.log（），但在控制台它不工作，我没有收到任何登录控制台
登录页面

"use client";

import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [message, setMessage] = useState("");
  const router = useRouter();

  const handleLogin = async () => {
    try {
      const response = await fetch("/api/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ username: username.trim(), password: password.trim() }), // Trim whitespace
      });

      if (response.status === 200) {
        const data = await response.json();
        setMessage("Login successful");
        router.push(data.redirect);
      } else {
        setMessage("Invalid credentials");
      }
    } catch (error) {
      console.error("Error:", error);
    }
  };

  return (
    <section className="bg-gradient-to-b from-gray-100 to-white">
      <div className="max-w-2xl mx-auto px-4 sm:px-6">
        <div className="pt-32 pb-12 md:pt-40 md:pb-20">
          <div className="max-w-3xl mx-auto text-center pb-12 md:pb-20 text-5xl font-extrabold ">
            <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">
              Welcome, back
            </span>
          </div>
          <form>
            <div className="flex flex-wrap -mx-3 mb-4">
              <div className="w-full px-3">
                <label
                  className="block text-teal-800 font-medium mb-2 py-2 text-lg"
                  htmlFor="username"
                >
                  Username
                </label>
                <input
                  id="username"
                  type="text"
                  className="form-input w-full text-teal-800 py-1"
                  placeholder="Enter Your Username"
                  required
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                />
              </div>
            </div>
            <div className="flex flex-wrap -mx-3 mb-4">
              <div className="w-full px-3">
                <div className="flex justify-between">
                  <label
                    className="block text-teal-800 text-lg font-medium mb-1 py-2"
                    htmlFor="password"
                  >
                    Password
                  </label>
                </div>
                <input
                  id="password"
                  type="password"
                  autoComplete="current-password"
                  className="form-input w-full text-teal-800 py-1"
                  placeholder="Enter your password"
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </div>
            </div>
            <div className="flex flex-wrap -mx-3 mt-6 my-2">
              <div className="w-full px-3">
                <button
                  className="btn text-white bg-gradient-to-r from-blue-500 to-teal-400 hover:bg-teal-700 w-full py-2 rounded-lg"
                  onClick={handleLogin}
                >
                  Log In
                </button>
              </div>
            </div>
            {message && (
              <p className="text-red-500 text-center mt-4 font-medium">
                {message}
              </p>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

字符串
这是我的身份验证和重定向API

import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { username, password } = req.body;
    console.log('Received username:', username);
    console.log('Received password:', password);

    if (username === 'admin' && password === 'admin') {
      res.status(200).json({ redirect: '/dashboard' });
    } else {
      res.status(401).json({ error: 'Authentication failed' });
    }
  } else {
    res.status(405).end();
  }
}

型