面试题：Next.js中页面路由与API路由的基础区别

Question

请阐述Next.js中页面路由与API路由在定义方式、用途以及请求处理上有哪些基本的区别。

Answer 1

定义方式

• 页面路由：在Next.js中，页面路由通过在pages目录下创建文件来定义。文件名即路由路径，例如pages/about.js对应/about路由。嵌套路由通过在目录中创建文件实现，如pages/products/[id].js，[id]是动态路由参数。
• API 路由：API 路由定义在pages/api目录下。同样以文件名为路由路径，例如pages/api/users.js对应/api/users路由。文件名决定了 API 端点的路径。

用途

• 页面路由：主要用于呈现用户界面，负责构建应用的不同页面。它处理与用户交互相关的逻辑，如渲染HTML、管理页面状态等，通常用于展示内容给用户浏览。
• API 路由：专门用于提供后端 API 服务，供前端或其他客户端调用。用于处理数据的获取、创建、更新和删除等操作，与数据库交互、进行业务逻辑处理等，不直接面向用户展示，而是为前端提供数据接口。

请求处理

• 页面路由：请求到达页面路由时，Next.js 会根据请求的路由找到对应的页面组件并渲染。可以使用getStaticProps、getStaticPaths和getServerSideProps等方法在不同阶段获取数据用于页面渲染。页面组件通常返回一个 React 组件，最终生成 HTML 发送给客户端。
• API 路由：当请求到达 API 路由时，会执行pages/api目录下对应文件中导出的函数。这个函数接收req（请求对象）和res（响应对象），开发人员可以在函数中编写自定义的请求处理逻辑，如解析请求体、验证数据、查询数据库等，然后通过res对象返回 JSON 或其他格式的数据给客户端。