Next.js中动态路由与服务器组件结合

演示如何在 Next.js 13+ 中结合 动态路由 和 服务器组件（Server Components） 使用。这个例子涉及：

• 动态路由获取 URL 参数

• 使用服务器组件在服务器端获取数据

• 展示如何在服务器组件中调用外部 API 或数据库

• 适用于实际项目的代码结构和最佳实践

场景描述

假设我们做一个博客系统，页面路径为 /posts/[id]，根据动态路由参数 id 拉取对应文章内容，且页面是服务器组件。

代码结构示例

/app
  /posts
    /[id]
      page.tsx    <-- 动态路由的服务器组件页面
  /components
    PostContent.tsx  <-- 文章内容展示组件（服务器组件）
  /lib
    api.ts           <-- 服务器端调用 API 或数据库封装

1. /lib/api.ts - 模拟服务器端获取数据函数

// 仅示意，实际可调用数据库或第三方API
export async funct