Next.js 13.4.2创建多页面时出现404页面问题求助

你当前的页面创建方式不符合Next.js 13.4.2+版本中App Router的路由规则，导致访问时出现404错误。

问题原因 #

App Router采用文件夹路由机制：每个路由路径需要对应一个独立的文件夹，且文件夹内必须包含名为page.js（或page.tsx）的文件作为该路由的页面入口。你直接在app目录下创建page2.js的方式不被路由系统识别。

正确的实现步骤 #

1. 调整文件结构：在app目录下创建名为page2的文件夹，然后在该文件夹内新建page.js文件：

...
|-app
|--globals.css
|--layout.js
|--page.js
|--page.module.css
|--page2
|   |--page.js
...

2. 迁移页面代码：将原page2.js中的代码移动到app/page2/page.js中：

// app/page2/page.js
export default function Page2() {
  return (
    <>
      <h1>Test</h1>
    </>
  )
}

完成以上操作后，重启开发服务，访问http://localhost:3000/page2即可正常显示页面。

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