Next js：点击登录显示登录表单，点击注册显示注册表单的功能

Next js：点击登录显示登录表单，点击注册显示注册表单的功能

在Next.js中实现点击登录显示登录表单，点击注册显示注册表单的功能，你可以使用React的状态管理来控制显示哪个表单。这里是一个简单的示例，展示了如何根据用户的点击切换显示登录或注册表单。

首先，你需要在你的Next.js项目中创建一个组件，比如命名为authform.tsx。在这个组件中，你可以使用React的useState钩子来管理当前应该显示哪个表单。

authform.tsx

'use client'
import React, { useState } from 'react';

const AuthForm = () => {
  // 使用状态管理来控制是显示登录表单还是注册表单
  // 默认显示登录表单
  const [isLogin, setIsLogin] = useState(true);

  return (
    <div>
      <div>
        <button onClick={() => setIsLogin(true)}>登录</button>
        <button onClick={() => setIsLogin(false)}>注册</button>
      </div>
      {isLogin ? (
        <div>
          <h2>登录</h2>
          {/* 登录表单的内容 */}
          <form>
            <input type="text" placeholder="用户名" />
            <input type="password" placeholder="密码" />
            <button type="submit">登录</button>
          </form>
        </div>
      ) : (
        <div>
          <h2>注册</h2>
          {/* 注册表单的内容 */}
          <form>
            <input type="text" placeholder="用户名" />
            <input type="email" placeholder="邮箱" />
            <input type="password" placeholder="密码" />
            <button type="submit">注册</button>
          </form>
        </div>
      )}
    </div>
  );
};

export default AuthForm;

在这个示例中，我们创建了两个按钮，一个用于切换到登录表单，另一个用于切换到注册表单。通过设置状态isLogin为true或false，我们可以控制是显示登录表单还是注册表单。

然后，你可以在你的页面组件中导入并使用这个authform组件。例如，在pages/index.js中：

import React from 'react';
import AuthForm from '../components/AuthForm'; // 假设你的AuthForm组件位于components文件夹

const HomePage = () => {
  return (
    <div>
      <h1>欢迎来到我们的网站</h1>
      <AuthForm />
    </div>
  );
};

export default HomePage;

这样，当用户点击“登录”按钮时，页面会显示登录表单；点击“注册”按钮时，页面会切换到显示注册表单。通过React的状态管理和条件渲染，你可以很容易地实现这样的功能。