如何配置Next.js 13并行路由文件夹结构，实现多路由共用布局？

现有如下文件夹结构：

-conversations
--layout.tsx
--[id]
----@list
------page.tsx
----@messages
------page.tsx
--page.tsx

layout.tsx代码如下：

// packages/webapp/src/app/(authenticated)/conversations/layout.tsx
import React from 'react';
import { Grid } from '@mui/material';
import PaperContainer from '@/app/_components/PaperContainer';

interface ConversationsLayoutProps {
  children: React.ReactNode;
  list: React.ReactNode;
  messages: React.ReactNode;
}

const ConversationsLayout: React.FC<ConversationsLayoutProps> = ({ children, list, messages }) => {
  return (
    <>
      <Grid item xs={12} sm={5} md={3}>
        <PaperContainer sx={{ justifyContent: 'flex-start' }}>
          {list}
        </PaperContainer>
      </Grid>
      <Grid item xs={12} sm={7} md={8} sx={{ height: '100%' }}>
        <PaperContainer sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
          {messages}
        </PaperContainer>
      </Grid>
    </>
  );
};

export default ConversationsLayout;

需求：访问/conversations或/conversations/some-id时，都加载上述布局。

利用Next.js的并行路由与布局继承特性，按以下步骤调整即可实现需求：

1. 给根路由/conversations添加并行路由插槽
   在conversations目录下创建@list和@messages文件夹，各自新增page.tsx文件。你可以直接复用[id]/@list/page.tsx和[id]/@messages/page.tsx的逻辑，也可以根据根路由需求独立实现内容。

2. 保留现有布局的插槽逻辑
   你当前的layout.tsx已经定义了list和messages两个插槽props，Next.js会自动将对应并行路由的内容注入到这些props中，无需修改布局组件的代码。

3. 确认路由的布局继承关系

   • [id]目录属于conversations的子路由，默认会继承conversations/layout.tsx作为父布局，无需额外配置。
   • 访问/conversations/some-id时，[id]/@list和[id]/@messages的内容会自动替换根路由的对应插槽；如果子路由下没有这两个并行路由，会回退使用根路由的插槽内容。

4. 可选：清理冗余文件
   如果根路由/conversations不需要单独的page.tsx内容，可以直接删除该文件，让并行路由的内容作为页面默认渲染项。

完成调整后，访问/conversations和/conversations/some-id都会加载目标布局，并各自渲染对应路由下的并行插槽内容。

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