新建一个页面，放在 app/login 目录的下面，名字是 page.tsx，文件里定义一个组件，名字是 Page。

这个页面的路由地址应该是 login，在浏览器，访问一下 /login 这个地址，这里显示的就是 login/page。

Head

在项目里再新建一个文件，放在 app/login 的下面，名字是 head.tsx，文件里定义一个组件，名字是 Head，在组件的视图里面用一组 Fragment，里面添加一组 title 元素，包装的文字是 “用户登录 - 宁皓网”。

在浏览器观察一下登录页面的标签栏里的文字，现在是 “用户登录 - 宁皓网”。

组件

回到 login/page，在这个组件里面解构一下 useLogin()，需要的是 name，setName，password，setPassword，还有 login 这些东西。

因为这个 useLogin 自定义的 hook 里面用了 useState，所以这个组件必须得是一个客户端组件 。在文件顶部，用一下 use client 这个指令。

在组件的视图这里可以先用一组 form 元素，绑定 onSubmit 事件，直接提供事件处理，有个 event 参数，用一下 event.preventDefault()。

在里在添加一组 div，在它里面再添加一个 text 类型的 input，placeholder 占位符文字设置成 “名字”，autoComplete 是 username，value 可以绑定 name，设置一下 onChange ，提供一个事件处理，有个 event 参数，在里面用一下 setName，把 event.currentTarget.value 交给这个函数。

下面再准备一个密码字段，复制一份，修改一下 input 元素的 type，改成 password，添加一个密码字段 ，占位符文字是“密码”，autoComplete 设置成 current-password。value 是 password，onChange 事件处理里面用一下 setPassword，把 event.currentTarget.value 交给这个函数。

再准备一个提交按钮，一组 div，里面添加一组 button 元素，按钮文字是“登录”，绑定 onClick 事件，用 login 来处理这个事件。

测试

在浏览器测试一下，在这个登录页面，输入登录的用户的名字，还有用户的密码。然后点击“登录”，页面被刷新了。这是因为在这个 form 元素的 onSubmit 事件发生的时候，需要执行一下 event.preventDefault()。

回到浏览器再测试一下，输入用户名，还有密码，点击登录。成功以后在控制台会输出成功登录以后得到的响应，里面有用户的 id，name 还有 token。