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;