Next.js API 路由-JavaScript中文网-JavaScript教程资源分享门户

Next.js 提供了强大的 API 路由功能，使得开发者可以在服务器端处理各种 HTTP 请求。API 路由让你可以创建自定义的 API 端点，无需额外配置服务器。本章将详细介绍如何使用 Next.js 的 API 路由。

API 路由的基本概念

API 路由允许你在 pages/api 目录下创建一个文件作为处理特定请求的 API 端点。例如，创建一个 pages/api/hello.js 文件，当用户访问 /api/hello 时，Next.js 将会执行该文件中的代码并返回响应结果。

创建 API 路由文件

在 pages/api 目录下创建一个新的 JavaScript 文件，例如 hello.js。这个文件将会处理所有发往 /api/hello 的请求。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

处理不同的请求类型

API 路由文件可以处理多种类型的 HTTP 请求，包括 GET、POST、PUT、DELETE 等。通过检查 req.method 可以确定当前请求的类型，并根据需要做出响应。

// www.javascriptcn.com code example
// pages/api/user.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // 处理 GET 请求
    res.status(200).json({ users: ['User 1', 'User 2'] });
  } else if (req.method === 'POST') {
    // 处理 POST 请求
    res.status(201).json({ message: 'User created' });
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

处理查询参数和请求体

在处理 API 路由时，经常需要从请求中获取数据。这可以通过 req.query 和 req.body 来实现。

使用 `req.query` 获取查询参数

当用户通过 URL 查询字符串发送数据时，这些数据会被存储在 req.query 对象中。

// pages/api/search.js
export default function handler(req, res) {
  const query = req.query.q;
  res.status(200).json({ searchQuery: query });
}

使用 `req.body` 获取请求体

对于 POST 或 PUT 请求，通常需要解析请求体中的 JSON 数据。Next.js 自动支持解析 JSON 请求体。

// www.javascriptcn.com code example
// pages/api/post.js
import bodyParser from 'body-parser';

export default function handler(req, res) {
  if (req.method === 'POST') {
    bodyParser.json()(req, res, () => {
      const data = req.body;
      res.status(201).json(data);
    });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

处理错误

在 API 路由中处理错误是非常重要的，可以确保应用的健壮性。

抛出错误

你可以通过抛出错误来处理异常情况。

// www.javascriptcn.com code example
// pages/api/error.js
export default function handler(req, res) {
  throw new Error('An error occurred');
}

// 或者使用 try-catch 结构
export default function handler(req, res) {
  try {
    // 一些可能出错的操作
    res.status(200).json({ success: true });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Internal Server Error' });
  }
}

错误处理中间件

你也可以为整个 API 路由定义错误处理中间件。

// www.javascriptcn.com code example
// pages/api/errorHandler.js
export default function errorHandler(err, req, res, next) {
  console.error(err.stack);
  res.status(500).send('Something broke!');
}

export const config = {
  api: {
    bodyParser: false,
  },
};

const originalHandler = (req, res) => {
  // 你的处理逻辑
};

export default function handler(req, res) {
  try {
    originalHandler(req, res);
  } catch (err) {
    errorHandler(err, req, res);
  }
}

部署 API 路由

部署 API 路由非常简单，因为 Next.js 已经为你处理了大部分工作。只需按照常规步骤构建和部署你的 Next.js 应用即可。

构建应用

使用 next build 命令构建生产环境版本的应用。

部署应用

部署过程取决于你的托管服务提供商。大多数情况下，只需要将构建后的文件上传到服务器即可。

以上就是 Next.js API 路由的详细介绍。通过本章的学习，你应该能够掌握如何在 Next.js 中创建和管理 API 路由。接下来可以尝试自己动手实践，进一步加深理解。

Next.js API 路由