是否有Next JS app目录Layouts RFC可正常运行的使用示例

功能上线状态 #

• 该篇Layouts RFC发布时，对应的app目录页面结构化方案（也就是现在的App Router）确实尚未正式上线。RFC本身是面向社区的意见征求文档，发布阶段功能还在迭代开发，API设计都可能存在变动，官方发布RFC的核心目的是收集开发者反馈调整方案，这也是你当时找不到可正常运行示例的核心原因。
• 这套能力在Next.js 13.0版本首次作为实验特性对外开放，需要手动修改配置开启；在Next.js 13.4版本正式标记为生产环境稳定可用，目前最新正式版Next.js默认支持该套目录方案，无需额外开启实验配置。

可运行的最小实现参考 #

不需要找第三方零散示例，直接按以下步骤就能搭建符合规范的可运行项目：

1. 执行以下命令创建最新版Next.js项目，初始化过程中选择启用App Router即可：

   npx create-next-app@latest layout-demo
   

   初始化交互中遇到Would you like to use App Router?提示时选择Yes，其余配置可按需选择。
2. 初始化生成的项目本身就是官方原生的标准实现，核心文件完全匹配RFC描述的结构规则：
   • app/layout.tsx：根全局布局，所有路由页面都会自动嵌套在该布局中渲染，默认包含全局<html>、<body>标签配置
   • app/page.tsx：根路径/对应的页面组件
   • 你可以自行新增嵌套路由验证布局能力：比如新建app/blog/layout.tsx作为blog路由段的专属嵌套布局，新建app/blog/page.tsx作为blog路径的页面，访问/blog时会自动按「根布局 -> blog布局 -> blog页面」的层级嵌套渲染，和RFC描述的能力完全一致。
3. 执行启动命令即可本地运行验证：

   npm run dev
   

补充说明：如果你使用的是Next.js 13.0~13.3区间的版本，需要在next.config.js配置文件中添加experimental: { appDir: true }才能启用app目录能力，13.4及以上版本不需要该配置。

内容的提问来源于stack exchange，提问作者Abdul Mahamaliyev