Next.js 应用路由
👆本指南假设您正在使用 Next.js 应用路由。
视频指南
安装依赖
在您网站的目录中运行：
这将询问您一些设置问题。当提示输入公共资产目录时，输入：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 文件夹开始。这里的页面将列出我们所有的帖子。
文件： app/posts/page.tsx
您可能已经注意到这是一个服务器渲染的页面。根据此页面的生成方式，Next 将会：
- A. 将其构建为动态/服务器渲染页面
- B. 将其构建为静态页面。
如何渲染此页面由您决定。
渲染单个帖子
为了使其与 TinaCMS 可视化编辑器一起工作，我们将其分为两个组件。一个将在构建时构建页面，另一个将是一个可以与 TinaCMS 交互的客户端渲染页面。
文件： app/posts/[...filename].tsx
在这里，我们使用 generateStaticParams 将这些页面构建为 SSG。您可以根据需要自由更改此设置。
现在，为了使可视化编辑器工作，我们将创建一个新的“客户端页面”：
文件： app/posts/[...filename]/client-page.tsx
常见问题
页面上的更新未正确反映
在使用 TinaCMS 的 Next.js 项目中使用应用路由时，您可能会遇到 Vercel 过度缓存内容导致某些更新未正确反映的情况。
根本原因是 Vercel 数据缓存 正在缓存来自 TinaCloud 内容 API 的响应。这可以通过查询 GraphQL API 并查找更新的内容，或者检查 Vercel 中缓存的使用情况来确认。
有两种方法可以修改您的网站以最佳地使用 Vercel 数据缓存：
- 手动更新路由段的默认重新验证时间。这将导致增量静态生成在运行时重新验证缓存的内容 API 响应时重建页面并更新内容。更多信息请参见：https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
- 向您的查询（TinaCMS 生成的）添加一个额外的参数，例如：
const response = await client.queries.page({ relativePath: 'pages/home.mdx'}, { fetchOptions: { next: { revalidate: 60 } })})
这将传递给底层的fetch请求。有关 Next.js 如何扩展fetch的更多信息，请参见：https://nextjs.org/docs/app/api-reference/functions/fetch
新创建的内容项未出现在页面上
在使用 TinaCMS 的 Next.js 项目中使用应用路由时，您可能会遇到新创建的内容项未立即出现在相应页面上的情况。这种行为通常是由 Next.js 和浏览器采用的激进缓存机制引起的。
为了确保在本地开发期间看到最新的内容，您可以在浏览器的开发者工具中禁用浏览器缓存：
- 在浏览器中打开开发者工具（例如，Chrome，Firefox）。
- 导航到网络选项卡。
- 勾选禁用缓存选项（此设置在开发者工具打开时有效）。
有关 Next.js 中缓存的更详细信息，请参阅 Next.js 官方文档：
Next.js 缓存文档
下一步
另请参阅
- Next.js 页面路由设置 - 替代路由方法
- 可视化编辑设置 - 启用实时预览编辑
- 其他框架指南 - Astro, Hugo, Gatsby 等