新建一个文件，放在 app/create 目录的下面，名字是 page.tsx，在文件里定义一个组件，名字是 Page。在同一目录的下面再创建一个文件，名字是 head.tsx，文件里定义一个组件，名字是 Head。设置一下组件视图，一组 Fragment，里面用一组 title 元素，文字是“创建内容 - 宁皓网”。

app-toolbar

打开 app-toolbar 这个组件，在组件的视图里，判断了当前用户有值以后，可以添加一个创建内容链接，一组 div 元素，里面用一下 Link 组件，组件的 href 属性的值是 /create，它里面包装的是一个 Image 组件， src 是 /icons/add.svg，alt 是“添加内容”，width 是 24，height 也是 24。

预览

在浏览器，点击页面头部的这个“添加”小图标，可以打开创建内容页面。

组件

回到 create/page，在组件里面解构一下 useCreatePost() 返回的结果，需要的是 title，setTitle，content，setContent，还有 createPost。

use client

因为组件里用的这个自定义的 hook 里面，用了 useState 这个客户端 hook，所以我们需要把这个组件转换成一个客户端组件，在文件顶部，添加一个 'use client' 指令。

视图

继续设置一下组件视图，一组 div，里面包装的东西是一个 text 类型的 input，placeholder 是“标题”，value 可以绑定 title 这个数据的值，再绑定 onChange 事件，处理一下这个事件，有个 event 参数，执行一下 setTitle，提供给它的值是 event.currentTarget.value。

下面再添加一组 div，里面用一下 textarea 元素，placeholder 是“正文”，value 可以绑定 content，绑定 onChange 事件，有个 event 参数，执行一下 setContent，提供的值是 event.currentTarget.value。

最后再添加一个发布按钮，一组 div，里面包装的是一组 button 元素，按钮文字是“发布”，绑定 onClick 事件，用 createPost 来处理这个事件。

测试

在浏览器，打开创建内容页面，输入要创建的内容的标题，还有内容的正文，然后点击“发布”。成功以后，会在控制台上输出新创建的这个内容的 id 号。

打开 tableplus，观察一下服务端应用数据库的 post 这个数据表，在这里你会发现刚才新创建的这个内容。这个内容的作者的 id 是 3，对应的用户就是“李白”，也就是在前端成功登录的那个用户。