Next.js 中的 pages 目录有什么作用？

推荐答案

在 Next.js 中，pages 目录是用于定义应用程序路由的核心部分。每个文件或子目录都会自动映射为一个路由，文件路径决定了 URL 路径。例如，pages/index.js 对应根路径 /，而 pages/about.js 对应 /about 路径。

本题详细解读

1. 自动路由生成

Next.js 使用文件系统作为路由系统的基础。pages 目录中的每个文件或子目录都会自动生成一个对应的路由。例如：

• pages/index.js -> /
• pages/about.js -> /about
• pages/blog/[slug].js -> /blog/:slug（动态路由）

2. 支持多种文件类型

pages 目录不仅支持 .js 文件，还支持 .jsx、.ts、.tsx 等文件类型。这使得开发者可以使用 TypeScript 或 JSX 来编写页面组件。

3. 动态路由

Next.js 支持动态路由，通过在文件名中使用方括号 [] 来定义动态路径。例如：

• pages/blog/[slug].js 可以匹配 /blog/1、/blog/2 等路径。
• pages/[username]/settings.js 可以匹配 /john/settings、/jane/settings 等路径。

4. API 路由

pages/api 目录用于定义 API 路由。这些路由不会渲染页面，而是用于处理 HTTP 请求。例如，pages/api/hello.js 可以通过 /api/hello 访问。

5. 嵌套路由

通过在 pages 目录中创建子目录，可以轻松实现嵌套路由。例如：

• pages/dashboard/settings.js -> /dashboard/settings
• pages/dashboard/profile.js -> /dashboard/profile

6. 预渲染支持

pages 目录中的页面支持静态生成（Static Generation）和服务器端渲染（Server-Side Rendering）。开发者可以通过 getStaticProps 和 getServerSideProps 等函数来控制页面的渲染方式。

7. 自定义 _app.js 和 _document.js

pages 目录中的 _app.js 和 _document.js 是特殊的文件，用于自定义应用程序的全局布局和 HTML 文档结构。

8. 错误页面

pages/404.js 和 pages/_error.js 是用于自定义 404 页面和错误页面的特殊文件。

通过以上特性，pages 目录在 Next.js 中扮演着至关重要的角色，帮助开发者快速构建高效、灵活的路由系统。