Next.js 13路由问题求助：如何将/pages/Home路径改为/Home

一、搞定URL路径问题 #

你当前的URL带pages前缀，是因为这个文件夹被Next.js App Router解析成了路由层级。用路由组就能解决这个问题——给文件夹加英文括号后，它不会被纳入URL路径：

• 把src/app/pages重命名为src/app/(pages)
• 内部的Home、Footer等文件/文件夹保持原结构不变

修改后，src/app/(pages)/Home对应的路由就变成http://localhost:3000/Home，直接去掉了pages前缀。

二、页面与布局的正确配置 #

1. 页面文件规范 #

App Router只认page.tsx/page.jsx作为页面入口，所以你的Home文件夹里必须有这个文件，示例结构：

src/app/(pages)/Home/page.tsx

在这个文件里编写Home页面的内容即可。

如果Footer是全局组件（不是独立页面），别把它放在路由文件夹下，建议单独创建src/components/Footer.tsx来管理，避免被解析成/Footer路由。

2. 布局配置（两种场景） #

全局布局（所有页面共用）

如果要给整个应用加统一布局（比如每个页面都显示Footer），在src/app目录下创建layout.tsx：

// src/app/layout.tsx
import './globals.css';
import Footer from '@/components/Footer';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        {/* 页面内容会渲染在这里 */}
        {children}
        {/* 全局 Footer */}
        <Footer />
      </body>
    </html>
  );
}

仅(pages)组内页面用的局部布局

如果只想给(pages)文件夹下的页面（比如Home）单独设置布局，就在src/app/(pages)目录下创建layout.tsx：

// src/app/(pages)/layout.tsx
import Footer from '@/components/Footer';

export default function PagesLayout({ children }) {
  return (
    <div className="page-wrapper">
      {children}
      <Footer />
    </div>
  );
}

这个布局只会作用于(pages)组内的所有页面，不影响其他路由页面。

三、验证效果 #

重启开发服务器：

npm run dev

现在访问http://localhost:3000/Home就能直接打开页面，布局也会自动生效。

注意事项 #

• 页面文件必须命名为page.tsx/page.jsx，否则Next.js无法识别为路由页面
• 路由组的英文括号是隐藏URL层级的关键，不能省略
• 非路由组件尽量放在components目录，避免路由解析混乱

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