使用React, Next.js, TailwindCSS和Prisma构建全栈Netflix克隆项目

import { useState } from 'react';
import Router from 'next/router';
import { mutationWrapper } from '../../utils/wrapper';
import { useUser } from '../../utils/useUser';
import { useForm } from 'react-hook-form';
 
export default function Login() {
  const [error, setError] = useState('');
  const { user, setUser } = useUser();
  const { register, handleSubmit, formState } = useForm();
  const { isSubmitting } = formState;
 
  const onSubmit = async (data) => {
    try {
      setError('');
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      if (response.ok) {
        const userData = await response.json();
        setUser(userData);
        Router.push('/');
      } else {
        setError(await response.text());
      }
    } catch (error) {
      setError(error.message);
    }
  };
 
  if (user) Router.push('/');
 
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-5">
      <div className="max-w-md w-full">
        <div className="flex items-center justify-center">
          <div className="flex flex-col bg-white rounded-lg shadow-lg px-10 py-12">
            <div className="flex items-center mb-6">
              <img
                src="/netflix.png"
                alt="Netflix"
                className="w-10 mr-2"
              />
              <span className="text-black text-2xl">登录Netflix</span>
            </div>
            <form onSubmit={handleSubmit(onSubmit)}>
              <div className="mb-4">
                <label
                  htmlFor="email"
                  className="text-sm text-gray-600"
                >
                  邮箱
                </label>
                <input
                  type="email"
                  {...register('email', { required: '需要邮箱' })}
                  className="border border-gray-300 rounded-md px-4 py-2 mt-2 focus:outline-none focus:border-indigo-500"
                  placeholder="你的邮箱"
                />
                {formState.errors.email && (
                  <p className="text-red-500 text-xs mt-1">
                    {formState.errors.email.message}
                  </p>
                )}
              </div>
              <div className="mb-6">
                <label
                  htmlFor="pass