DEV Community
·
如何在 Next.js 中创建页面
内容提要
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 v13引入的基于文件的路由系统，使得开发者可以通过简单的文件结构来管理路由。这种方式不仅提高了开发效率，还减少了配置的复杂性，适合快速构建和迭代项目。
嵌套路由的实现
在创建嵌套路由时，确保每个子目录都有相应的page.tsx文件是至关重要的。否则，用户访问时将会遇到404错误。这一要求强调了文件结构与路由访问之间的直接关联。
命名约定的重要性
遵循小写字母命名约定不仅是最佳实践，还能避免潜在的路由冲突和访问问题。开发者在创建目录时应特别注意这一点，以确保项目的可维护性和可扩展性。
延伸问答
如何在 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 文件。
