Next.js Pages目录嵌套布局失效问题求助

你的问题核心在于Next.js的Pages Router（pages目录结构）不支持自动识别文件夹下的layout.tsx作为嵌套布局——自动嵌套布局是App Router（app目录）的特性，两者的布局机制完全不同。

下面是具体的解决方法：

方法一：手动在页面中引入并包裹Layout组件 #

直接在auth下的每个页面（login/index.tsx、register/index.tsx）里导入Layout，将页面内容包裹在Layout组件内部：

以login/index.tsx为例：

import Layout from '../layout';

export default function Login() {
  return (
    <Layout>
      {/* 登录页面的内容 */}
      <div>
        <h2>登录页面</h2>
        {/* 表单等元素 */}
      </div>
    </Layout>
  );
}

register/index.tsx做同样的修改即可。

方法二：使用高阶组件（HOC）统一包裹页面 #

如果auth目录下有多个页面，不想重复编写导入和包裹代码，可以在layout.tsx中新增一个高阶组件，用它来统一处理布局包裹：

修改auth/layout.tsx：

import React, { ReactNode, FC } from 'react';

interface LayoutProps {
  children: ReactNode;
}

export default function Layout({ children }: LayoutProps) {  
  return (
    <>
        <h1>Test Layout</h1>
        {children}
    </>
  )
};

// 新增高阶组件，用于包裹页面组件
export function withAuthLayout(Component: FC) {
  return function WithAuthLayout() {
    return (
      <Layout>
        <Component />
      </Layout>
    );
  };
}

然后在login/index.tsx中使用这个高阶组件：

import { withAuthLayout } from '../layout';

function Login() {
  return (
    <div>
      <h2>登录页面</h2>
    </div>
  );
}

export default withAuthLayout(Login);

额外说明：如果想要自动嵌套布局 #

如果你希望实现“文件夹下的layout自动应用到子页面”的效果，需要切换到Next.js的App Router（即使用app目录代替pages目录）。App Router原生支持这种嵌套布局机制，但需要注意两种路由体系的语法差异，比如路由文件命名规则、组件props传递方式等。

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