DEV Community
·
如何在 Next.js 中创建页面
💡
原文英文，约600词，阅读约需3分钟。
📝
内容提要
Next.js v13引入了基于文件的路由，文件名即为路由名。在app目录下创建page.tsx文件可生成主页路由，子目录及其对应的page.tsx文件可实现嵌套路由，如/products/mobile/samsung。每个嵌套路由需有相应的page.tsx文件以确保可访问。
🎯
关键要点
- Next.js v13引入基于文件的路由，文件名即为路由名。
- 在app目录下创建page.tsx文件可生成主页路由。
- 子目录及其对应的page.tsx文件可实现嵌套路由。
- 每个嵌套路由需有相应的page.tsx文件以确保可访问。
- 命名约定：目录名称应使用小写字母。
- 创建路由需要一个文件夹，文件夹名称即为路由名。
- 嵌套路由需要在app目录下创建相应的嵌套目录。
- 用户访问嵌套路由时，需确保每个嵌套路由都有page.tsx文件。
- 用户可以通过http://localhost:3000/products/mobile/samsung访问嵌套路由。
❓
延伸问答
如何在 Next.js 中创建主页路由？
在 app 目录下创建一个名为 page.tsx 的文件即可生成主页路由。
Next.js 的嵌套路由是如何工作的？
嵌套路由需要在 app 目录下创建相应的嵌套目录，每个嵌套路由都需有对应的 page.tsx 文件。
在 Next.js 中，目录名称有什么命名约定？
目录名称应使用小写字母，以遵循最佳实践。
如何访问 Next.js 中的嵌套路由？
用户可以通过访问相应的 URL，如 http://localhost:3000/products/mobile/samsung 来访问嵌套路由。
创建嵌套路由时需要注意什么？
每个嵌套路由必须有一个对应的 page.tsx 文件，以确保可访问。
如何在 Next.js 中创建一个关于页面？
在 app 目录下创建一个名为 about 的文件夹，并在其中添加一个 page.tsx 文件。
➡️
