Next.js 13如何为特定页面移除基础布局？

多数视图使用通用布局，但部分页面需要独立布局，尝试过在app根目录创建同布局的文件夹组，这种方式繁琐且破坏项目文件结构，尚未找到可行方案。

解决方案 #

1. 用虚拟路由组实现布局隔离 #

利用Next.js 13的虚拟路由组特性，无需打乱原有文件结构即可实现不同路由的布局区分：

• 为需要通用布局的路由创建虚拟组（如命名为(with-layout)），将对应页面文件移入该组，在组内创建layout.js作为通用布局文件
• 为不需要基础布局的页面创建另一个虚拟组（如(no-layout)），组内不设置layout.js，或创建一个仅返回children的空布局文件，即可实现页面无基础布局的效果

2. 结合Context实现头部内容动态切换 #

若需要根据路由动态调整布局中头部的显示内容，可通过React Context实现：

• 创建LayoutContext，在布局组件中根据当前路由信息更新Context中的状态
• 在头部组件中消费该Context，根据不同状态渲染对应的内容

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