Next.js Pages Router
☝️ 本指南假设您正在使用 Next.js pages router。
视频指南
安装依赖
在您网站的目录中运行：
这将询问您一些设置问题。当提示输入公共资产目录时，输入：public。
更新构建脚本
tina init 应该已经更新了您的 package.json 脚本。
如果这些没有被CLI设置，您需要手动应用它们。
启动TinaCMS
您可以通过以下命令启动TinaCMS：
我们推荐使用pnpm。
在TinaCMS运行时，导航到 http://localhost:3000/admin/index.html。
❓ 提示：如果运行此命令时出现错误，请参阅常见错误页面。
此时，您应该能够看到TinaCMS管理界面，选择一个帖子，保存更改，并看到更改持久化到您的本地markdown文件中。
TinaCMS配置文件
运行 tina init 命令后，创建了一些文件以便您尽快开始。其中之一是 tina/config.ts 文件。这是一个必需的配置文件，定义了所有的tina模式。
它看起来如下：
有关配置的更详细概述，请参阅使用TinaCMS进行内容建模
💡 如果您按照本指南使用tina init命令，您可能已经注意到创建了一个content和一个pages文件夹：
这些可以用作快速参考，但可以安全删除。
创建新帖子
💡 如tina/config.ts文件中定义的，我们有一个名为post的集合，它将被TinaCMS拾取并映射到您在TinaCMS管理页面中看到的内容。
- 前往
/admin/index.html - 点击Posts
- 点击Create
- 输入必填字段
- 保存
现在，让我们回去检查创建了什么。您将看到一个 /content 文件夹，其中保存了您的新帖子作为 .md 文件。此路径在 tina/config.ts 文件的post集合中定义！
渲染帖子集合
让我们从创建一个 /posts 文件夹开始。这里的索引将列出我们所有的帖子。
文件： pages/posts/index.tsx
渲染单个帖子
文件： pages/posts/[slug].tsx
下一步
另请参阅
- Next.js App Router设置 - 使用React服务器组件的现代路由
- 可视化编辑设置 - 启用实时预览编辑
- 其他框架指南 - Astro, Hugo, Gatsby等