使用create-next-app创建Next.js项目后缺失api、styles等文件夹的问题

你当前生成的是Next.js 13+版本的App Router结构项目，这是新版本默认的路由方案，所以不会生成传统的pages、pages/api、styles文件夹，替代的是app核心目录。

两种解决途径： #

1. 生成传统Pages Router结构的项目 #

如果需要回到经典的文件夹结构，重新执行创建命令时添加--legacy-app参数：

npx create-next-app@latest appname --legacy-app

执行后会自动生成pages、pages/api、styles等你熟悉的目录。

2. 适配App Router新结构 #

如果想使用新版本的路由系统，对应功能的目录调整如下：

• 页面文件：在app目录下创建page.js/page.tsx作为首页，其他页面可通过在app下创建子目录+page.js实现（比如app/about/page.js对应/about路由）
• API路由：在app目录下创建api子目录，路由文件命名为route.js/route.ts（比如app/api/hello/route.js对应/api/hello接口）
• 样式文件：默认生成的app/globals.css是全局样式入口，组件级样式可使用CSS Modules（命名为xxx.module.css）或Tailwind CSS（创建时选择启用的话已配置完成）

内容的提问来源于stack exchange，提问作者Jayita Deb