英文:
Getting 404 page when creating multiple pages in Next.js 13.4
问题
自从 Next.js 13.4.2 版本以后，我无法在 Next.js 中创建多个页面。
我尝试重新创建一个新的 Next.js 应用，并简单地添加了页面以查看是否可以工作。
// page2.js
export default function Page2() {
return (
<>
<h1>测试</h1>
</>
)
}
但它仍然无法正常工作，总是显示 404 页面。我已经检查了链接 http://localhost:3000/page。
文件结构如下：
...
|-app
|--globals.css
|--layout.js
|--page.js
|--page.module.css
|--page2.js // 不起作用
...
英文:
Since Next.js 13.4.2 I can't create multiple Pages in Next.js.
I tried to recreate a new Next.js app again and added pages to it with simple codes just to see if it works.
//page2.js
export default function Page2() {
return(
<>
<h1>Test</h1>
</>
)
}
But it still didn't work. It always shows me the 404 page. I already have checked the link http://localhost:3000/page
The file structure
...
|-app
|--globals.css
|--layout.js
|--page.js
|--page.module.css
|--page2.js //not working
...
答案1
得分: 3
使用应用程序路由器时，您需要遵循Next.js的文件约定，即文件夹确定路由路径，而特殊文件page.js|ts使特定路径可以公开访问。例如，考虑以下文件夹结构：
app/
page.js -> http://localhost:3000/
foo/
page.js -> http://localhost:3000/foo
bar/
page.js -> http://localhost:3000/foo/bar
test/
page.js -> http://localhost:3000/foo/test
您可以在路由指南中阅读更多信息：https://nextjs.org/docs/app/building-your-application/routing
英文:
With the app router you need to follow Next.js file convention, that is the folders determine the route path and a special file page.js|ts makes a certain path publicly accesible. Take for example the following folder structure:
app/
page.js -> http://localhost:3000/
foo/
page.js -> http://localhost:3000/foo
bar/
page.js -> http://localhost:3000/foo/bar
test/
page.js -> http://localhost:3000/foo/test
You can read more in the routing guide https://nextjs.org/docs/app/building-your-application/routing
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论