Next.js 项目创建后缺少 Pages 或 Styles 文件夹的解决方案
2024-03-07 01:01:38
使用create-next-app创建的Next.js项目默认缺少pages和styles文件夹，是因为启用了Next.js的App Router特性。 以下是详细解释和解决方案：
原因分析- Next.js 13.4版本引入了App Router，基于React Server Components和Server Actions，提供更强大的数据获取和路由功能。
- 默认情况下，create-next-app会推荐使用App Router，此时项目结构中不再包含pages目录，路由逻辑迁移至app目录。
- 若选择传统Pages Router（基于文件系统路由），项目会包含pages和styles文件夹。
- 适用场景：希望体验Next.js最新特性，或项目需要React Server Components、Server Actions等高级功能。
- 项目结构：nextjs-project├── app # 路由逻辑存放目录├── node_modules└── public
- 操作步骤：
运行命令创建项目时，选择启用App Router：npx create-next-app@latest
在交互式提示中，回答Would you like to use App Router? (recommended)时选择Yes。
- 注意事项：
App Router的路由规则和API与Pages Router不同，需学习新概念（如布局、嵌套路由等）。
学习曲线较高，需理解React Server Components和Server Actions。
- 适用场景：熟悉Pages Router，或项目需要兼容旧代码。
- 项目结构：nextjs-project├── node_modules├── pages # 路由逻辑存放目录├── public└── styles # 样式文件存放目录
- 操作步骤：
运行命令创建项目时，选择禁用App Router：npx create-next-app@latest
在交互式提示中，回答Would you like to use App Router? (recommended)时选择No。
- 注意事项：
Pages Router是Next.js的传统路由方式，基于文件系统路由（如pages/index.js对应根路径）。
官方文档建议新项目优先尝试App Router，但Pages Router仍会长期维护。
- 路由目录：
App Router：路由逻辑在app目录下，支持嵌套路由和布局。
Pages Router：路由逻辑在pages目录下，基于文件系统自动生成路由。
- 功能特性：
App Router：支持React Server Components、Server Actions、流式渲染等。
Pages Router：功能稳定，但缺乏App Router的高级特性。
- 学习成本：
App Router：需学习新API和概念，学习曲线较高。
Pages Router：熟悉React的开发者可快速上手。
- 新手推荐：优先尝试App Router，熟悉Next.js的未来方向。
- 项目需求：根据项目复杂度选择路由方式。若需高级功能（如SEO优化、数据获取优化），选择App Router；若追求快速开发，可选择Pages Router。
- 文档参考：App Router官方文档Pages Router官方文档
通过上述方法，可根据项目需求灵活选择路由方式，解决缺少pages或styles文件夹的问题。
热门标签
