NextJS新项目无Pages文件夹，如何创建新页面？

你用npx create-next-app@latest创建的项目默认启用了App Router（Next.js 13及以后的默认路由方案），取代了旧版的Pages Router，所以没有pages文件夹。在App Router模式下，创建页面的方式如下：

创建test页面的步骤 #

• 在项目根目录的app文件夹下，新建test子文件夹
• 在test文件夹中创建page.tsx文件（注意是page.tsx，不是旧版的index.tsx）
• 在page.tsx中编写默认导出的React组件，示例代码：

export default function TestPage() {
  return (
    <div className="p-4">
      <h1>Test Page</h1>
      <p>这是通过App Router创建的测试页面</p>
    </div>
  );
}

完成后启动项目，访问http://localhost:3000/test就能看到这个页面了。

额外说明 #

• 嵌套路由：如果要创建test/sub这样的嵌套页面，只需在app/test下再建sub文件夹，然后在sub里创建page.tsx即可
• 若想回到旧版Pages Router：下次创建项目时可以添加--no-app参数，命令为npx create-next-app@latest --no-app

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