Next.js+TypeScript：统一布局下按路由切换Content组件

1. 基于Next.js文件路由创建页面 #

Next.js 会根据pages目录的文件结构自动生成路由，直接创建对应路径的页面文件即可：

• 根路径/对应已有的pages/index.tsx
• /about路径需创建pages/about.tsx文件

示例about.tsx代码：

import type { NextPage } from 'next';

const AboutPage: NextPage = () => {
  return <div>这是关于页面的内容</div>;
};

export default AboutPage;

2. 统一全局布局（优化实现） #

你当前的页面级getLayout会导致重复代码，把全局布局整合到_app.tsx中，所有页面将自动复用同一个Layout：

修改_app.tsx：

import type { AppProps } from 'next/app';
import { ChakraProvider } from '@chakra-ui/react';
import Layout from '../components/Layout'; // 替换为你的Layout组件实际路径

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ChakraProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ChakraProvider>
  );
}

同时简化页面代码，移除页面文件中的getLayout逻辑，以index.tsx为例：

import type { NextPage } from 'next';

const HomePage: NextPage = () => {
  return <p>hello world</p>;
};

export default HomePage;

3. 验证效果 #

启动应用后：

• 访问http://localhost:3000，首页内容会嵌入Layout的Content组件中
• 访问http://localhost:3000/about，关于页内容会自动替换Content区域的内容，Header、Footer、Sidenav保持不变

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