动态路由就是地址里带参数的路由，比如显示单个内容的页面，就需要通过地址参数里的内容的 id 在后端那里请求指定的内容数据。

在 app/posts 下面新建一个页面，放在 [id] 这个目录里面，这种放在方括号里的东西就是路由地址里的动态的部分，它的值会传递给 Page，Layout 还有 Head。

在这个目录里先创建一个页面文件，名字是 page.tsx。这个目录名字里的 id 就是在这个页面可以使用的一个参数，它的值应该是一个内容的 id。

在文件里创建一个 Page 组件，在组件的属性类型里面，添加一个 params，它是一个对象，里面有个 id 属性，类型是 string。

在组件的视图里，一组 div，里面先添加一个“内容”，后面再绑定输出 props.params.id 。

Head

在这个目录里再创建一个 Head 文件，名字是 head.tsx，文件里定义一个 Head 组件，在属性类型里添加一个 params，它是一个对象，里面添加一个 id，类型是 string。

在组件的视图里用一组 Fragment，然后是一组 title 标签，里面绑定输出 props.params.id。

预览

在浏览器，访问一下 posts/1 ，显示的是 posts/[id] 这个目录里的那个页面组件，页面上会显示“内容” 还有地址参数里的这个 id 参数的值，这里就是 1 。再观察一下页面标题，现在是 1 。

再试一下 posts/3，页面上显示的这个 id 的值会变成 3，页面标题现在也是 3 。在这个页面里可以利用这个地址参数值获取到对应的内容数据。