Next.js中getLayout函数未触发，页面布局组件不加载

你的问题核心是混淆了Next.js Pages Router和App Router的布局机制，加上缺少Pages Router中触发自定义布局的关键文件_app.tsx，导致getLayout函数无法触发。

具体问题点 #

1. 你当前使用的是Pages Router（基于pages/目录、getServerSideProps），但layout.jsx的写法是App Router（Next.js 13+）的根布局格式，两者不兼容。
2. Pages Router中，页面的getLayout函数不会自动执行，必须在全局入口_app.tsx中显式调用。
3. 原layout.jsx中包含了<html>和<body>标签，这在Pages Router中是错误的——Next.js会自动生成这些根元素，重复嵌套会导致DOM结构异常。

修复步骤 #

1. 创建/修改pages/_app.tsx #

这是Pages Router的全局入口，必须在这里处理页面的自定义布局逻辑：

import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
  // 优先使用页面自定义的getLayout，没有则直接渲染组件
  const getLayout = Component.getLayout ?? ((page) => page);
  return getLayout(<Component {...pageProps} />);
}

2. 调整布局组件（重命名为Layout.jsx避免混淆） #

移除<html>和<body>标签，调整为Pages Router适用的布局结构：

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
import { Analytics } from '@vercel/analytics/react';
import Bootstrap from './bootstrap';
import Navbar from './Navbar';

export default function Layout({ children }) {
  return (
    <div className={`${inter.className} container`}>
      <Bootstrap />
      <Navbar />
      {children}
      <Analytics />
    </div>
  );
}

3. 修正news.tsx中的布局引入 #

确保导入调整后的布局组件，并保持getLayout逻辑：

// 修正导入路径，对应调整后的Layout.jsx位置
import Layout from './components/Layout';
// ... 其他代码不变

News.getLayout = function getLayout(page) {
  console.log('getlayout');
  return <Layout>{page}</Layout>;
};

完成以上步骤后，访问/news时getLayout会被触发，Navbar组件也会正常显示。

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