Next.js 项目结构
一个典型的 Next.js 项目包含一些特定的文件和目录，了解它们的作用有助于你更好地组织和开发应用。
顶级文件和目录
当你使用 create-next-app 创建一个新项目时，你会看到以下基本结构：
my-next-app/
├── .next/
├── node_modules/
├── pages/
│ ├── _app.js
│ ├── api/
│ │ └── hello.js
│ └── index.js
├── public/
│ ├── favicon.ico
│ └── vercel.svg
├── styles/
│ ├── globals.css
│ └── Home.module.css
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── yarn.lock下面我们来逐一了解这些文件和目录的用途。
.next
这是 Next.js 的构建目录，存放着编译后的代码、缓存和静态资源。你不需要手动修改这个目录里的任何内容，Next.js 会在构建和开发过程中自动管理它。
node_modules
存放项目的所有依赖包。当你运行 npm install 或 yarn 时，依赖包会被下载到这个目录。
pages
这是 Next.js 中最重要的目录之一，用于实现文件系统路由。
- 页面路由：
pages目录下的每个 React 组件都会被映射到一个路由。例如，pages/about.js会对应/about路由，pages/posts/first-post.js会对应/posts/first-post路由。 index.js：每个目录下的index.js文件会作为该目录的根路由。例如，pages/index.js是应用的首页 (/)，pages/posts/index.js是/posts路由。_app.js：这是一个特殊的组件，用于初始化所有页面。你可以在这里添加全局样式、布局或状态管理。_document.js：另一个特殊组件，用于自定义服务器返回的 HTML 文档结构。通常用于添加<html>和<body>的属性。api目录：pages/api目录下的文件会被映射为 API 路由。例如，pages/api/user.js会创建一个/api/user的 API 端点。
public
用于存放静态资源，如图片、字体、图标等。public 目录下的文件可以从应用的根路径直接访问。例如，public/my-image.png 可以通过 /my-image.png 访问。
styles
存放应用的样式文件。Next.js 支持多种样式方案：
- 全局样式：
styles/globals.css文件用于定义全局样式，需要在pages/_app.js中引入。 - CSS Modules：以
.module.css结尾的文件是 CSS Modules。它们会生成唯一的类名，避免样式冲突。例如，styles/Home.module.css。
components (可选)
虽然 create-next-app 默认不创建 components 目录，但通常建议创建一个用于存放可复用的 React 组件，如导航栏、按钮、卡片等。这有助于保持代码的整洁和可维护性。
配置文件
.eslintrc.json：ESLint 的配置文件，用于代码规范和错误检查。.gitignore：告诉 Git 哪些文件或目录不需要纳入版本控制，例如.next和node_modules。next.config.js：Next.js 的主配置文件。你可以在这里配置环境变量、重定向、代理、Webpack 等高级功能。package.json：项目的元数据文件，包含项目名称、版本、依赖项和脚本命令。README.md：项目的说明文档，通常包含项目介绍、安装和使用方法。
App Router (Next.js 13+)
从 Next.js 13 开始，引入了新的 App Router，它使用 app 目录代替 pages 目录。App Router 带来了更强大的布局功能和服务器组件。
如果你的项目使用了 App Router，项目结构会有些不同：
my-next-app/
├── app/
│ ├── layout.js
│ └── page.js
...app目录：用于存放 App Router 的页面、布局和组件。layout.js：定义共享的 UI 布局。page.js：定义页面的 UI 内容。
本教程主要基于 pages 目录，但了解 App Router 对于学习最新的 Next.js 非常重要。
总结
理解 Next.js 的项目结构是高效开发的基础。通过合理地组织文件和目录，你可以构建出清晰、可维护的 Web 应用。