如何让Next.js文件夹中的所有页面共享一个容器组件？

当然可以实现某个文件夹内所有页面共享一个容器的需求，下面分两种主流路由方案给你具体实现方式：

一、Pages Router（传统pages目录结构） #

方法1：通过自定义_app.js全局判断路由包裹 #

这种方法不用修改文件夹内的每个页面，全局判断路由后自动包裹容器：

1. 先创建共享的容器组件

// components/FolderContainer.js
export default function FolderContainer({ children }) {
  return (
    <div style={{ padding: '20px', border: '1px solid #eee' }}>
      {/* 这里可以放所有/folder下页面共享的内容，比如侧边栏、导航 */}
      <h2>Folder 共享容器</h2>
      {children}
    </div>
  );
}

2. 在pages/_app.js中判断路由并包裹

// pages/_app.js
import FolderContainer from '../components/FolderContainer';

export default function MyApp({ Component, pageProps, router }) {
  // 判断当前路由是否以/folder开头
  const isInFolder = router.pathname.startsWith('/folder');

  return isInFolder ? (
    <FolderContainer>
      <Component {...pageProps} />
    </FolderContainer>
  ) : (
    <Component {...pageProps} />
  );
}

方法2：用高阶组件（HOC）逐个包裹页面 #

如果不想全局修改_app.js，可以给文件夹内的每个页面手动套上容器：

1. 创建高阶组件

// components/withFolderContainer.js
import FolderContainer from './FolderContainer';

export default function withFolderContainer(Page) {
  return function WrappedPage(props) {
    return (
      <FolderContainer>
        <Page {...props} />
      </FolderContainer>
    );
  };
}

2. 在文件夹内的页面中使用

// pages/folder/child.js
import withFolderContainer from '../../components/withFolderContainer';

function ChildPage() {
  return <div>这是folder下的子页面</div>;
}

// 用高阶组件包裹页面
export default withFolderContainer(ChildPage);

二、App Router（Next.js 13+的app目录结构） #

App Router原生支持布局文件，实现起来更简单：

在app/folder目录下创建layout.js，这个文件会自动成为该文件夹下所有页面的共享容器：

// app/folder/layout.js
export default function FolderLayout({ children }) {
  return (
    <div style={{ padding: '20px', background: '#f5f5f5' }}>
      <h3>Folder 共享布局容器</h3>
      {/* 所有folder下的页面都会作为children渲染在这里 */}
      {children}
    </div>
  );
}

之后app/folder/page.js（对应/folder路由）、app/folder/child/page.js（对应/folder/child路由）等页面，都会自动被这个layout包裹，无需额外设置。

注意：你最初设想的把pages/folder/index.js作为容器是行不通的，因为index.js本身是对应/folder的页面路由组件，无法自动包裹同文件夹下的其他页面组件，需要用上面的方法实现。

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