本文旨在帮助 Next.js 初学者理解使用 create-next-app 创建项目后，为何缺少 pages 和 styles 文件夹，并提供相应的解决方案。主要原因是 Next.js 引入了 App Router，新项目默认采用 App Router 结构，不再包含 pages 目录。本文将详细介绍如何选择 App Router 或 Pages Router，以及两种路由方式的项目结构差异，并提供相关文档链接，以便开发者快速上手。
在使用 create-next-app 创建 Next.js 项目时，你可能会注意到项目结构与 Next.js 官方文档中描述的有所不同，特别是缺少 pages 和 styles 文件夹。这通常是因为 create-next-app 默认启用了 Next.js 的最新特性：App Router。
App Router 与 Pages Router 的区别
Next.js 提供了两种路由方式：App Router 和 Pages Router。App Router 是 Next.js 13.4 版本引入的，它基于 React Server Components 和 Server Actions，提供了更强大的数据获取和路由功能。Pages Router 则是 Next.js 的传统路由方式，基于 pages 目录下的文件系统路由。
如何选择路由方式
在创建 Next.js 项目时，create-next-app 会询问你是否使用 App Router：
$ npx create-next-app@latest✔ What is your project named? … nextjs-project✔ Would you like to use TypeScript? … Yes✔ Would you like to use ESLint? … Yes✔ Would you like to use Tailwind CSS? … No✔ Would you like to use `src/` directory? … No✔ Would you like to use App Router? (recommended) … Yes✔ Would you like to customize the default import alias (@/*)? … No
如果你选择 “Yes” (推荐)，则项目将使用 App Router，项目结构如下：
nextjs-project├── app├── node_modules└── public
此时，你的路由逻辑将位于 app 目录下，而不是 pages 目录。
如果你希望使用传统的 Pages Router，则在创建项目时选择 “No”：
$ npx create-next-app@latest✔ What is your project named? … nextjs-project✔ Would you like to use TypeScript? … Yes✔ Would you like to use ESLint? … Yes✔ Would you like to use Tailwind CSS? … No✔ Would you like to use `src/` directory? … No✔ Would you like to use App Router? (recommended) … No✔ Would you like to customize the default import alias (@/*)? … No
选择 “No” 后，项目结构将包含 pages 和 styles 文件夹：
nextjs-project├── node_modules├── pages├── public└── styles
注意事项
App Router 是 Next.js 的未来方向。 如果你是 Next.js 新手，建议尝试使用 App Router，以便熟悉 Next.js 的最新特性。App Router 和 Pages Router 的路由方式不同。 你需要学习新的路由规则和 API。App Router 的学习曲线可能比 Pages Router 稍高。 你需要了解 React Server Components 和 Server Actions 的概念。
总结
create-next-app 创建的项目默认使用 App Router，因此缺少 pages 和 styles 文件夹。如果你想使用 Pages Router，需要在创建项目时选择 “No” 来禁用 App Router。选择哪种路由方式取决于你的项目需求和个人偏好。建议查阅 Next.js 官方文档，了解更多关于 App Router 和 Pages Router 的信息。
相关文档
App Router: https://www.php.cn/link/78c9b2feb376c45dd97eb6a3cf19048ePages Router: https://www.php.cn/link/e54eb3dcfb82757f17eafe999d14f97f
以上就是Next.js 项目创建后缺少 Pages 或 Styles 文件夹的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520691.html
微信扫一扫 
支付宝扫一扫 
