Next.js 项目创建后缺少 Pages 或 Styles 文件夹的解决方案

本文旨在帮助 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 目录。

Play.ht

根据文本生成多种逼真的语音

下载

如果你希望使用传统的 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/78c9b2feb376c45dd97eb6a3cf19048e
• Pages Router: https://www.php.cn/link/e54eb3dcfb82757f17eafe999d14f97f