4 min readNext.js Demo
用 App Router 组织页面
Next.js 使用文件系统路由。把 page.tsx 放进 app/blog 目录，就能得到一个 /blog 页面。
App RouterRoutingNext.js
文件夹就是路由
在 App Router 中，app 目录下的文件夹会映射成 URL 片段。比如 app/blog/page.tsx 对应 /blog，而 app/blog/[slug]/page.tsx 对应文章详情页。
这种约定让路由结构和项目结构保持一致。打开文件树时，你通常就能看懂应用的页面层级。
page.tsx 是页面入口
每个可访问的路由都需要一个 page.tsx 文件，并默认导出 React 组件。页面组件默认是 Server Component，可以直接渲染服务端内容。
当页面需要交互时，可以把交互部分拆成 Client Component，而不是把整个页面都放到浏览器运行。