Skip to content

Next.js

API 中间件

示例

API 路由提供了内置的中间件，用于解析传入的请求 (req)。这些中间件是：

  • req.cookies - An object containing the cookies sent by the request. Defaults to {}
  • req.query - An object containing the query string. Defaults to {}
  • req.body - An object containing the body parsed by content-type, or null if no body was sent

自定义配置

每个 API 路由都可以导出（export）一个用以更改默认配置 config 对象，如下所示：

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '1mb',
    },
  },
}

该 api 对象包括可用于 API 路由的所有配置。

bodyParser 用于正文解析，如果你希望以 Stream 形式接收数据，可将将其禁用，如下所示：

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

bodyParser.sizeLimit 代表的是可以解析的数据负载的的最大体积，可以采用 bytes 所支持的任何格式，例如：

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '500kb',
    },
  },
}

externalResolver 是一个显式标志，用以告诉服务器此路由正在由外部解析器（例如 express 或 connect）处理。启用此参数将禁用针对未处理的 request（请求）所发出的警告。

export const config = {
  api: {
    externalResolver: true,
  },
}

针对 Connect/Express 中间件的支持

你还可以使用 Connect 兼容的中间件。

例如，可以利用 cors 软件包为 API 端点 配置 CORS 。

首先来安装 cors：

npm i cors
# or
yarn add cors

现在，将 cors 添加到 API 路由中：

import Cors from 'cors'

// Initializing the cors middleware
const cors = Cors({
  methods: ['GET', 'HEAD'],
})

// Helper method to wait for a middleware to execute before continuing
// And to throw an error when an error happens in a middleware
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result)
      }

      return resolve(result)
    })
  })
}

async function handler(req, res) {
  // Run the middleware
  await runMiddleware(req, res, cors)

  // Rest of the API logic
  res.json({ message: 'Hello Everyone!' })
}

export default handler

进入 支持 CORS 的 API 路由 示例以查看完整的应用程序代码

Extending the req/res objects with TypeScript

For better type-safety, it is not recommended to extend the req and res objects. Instead, use pure functions to work with them:

// utils/cookies.ts

import { serialize } from 'cookie'
import { NextApiResponse } from 'next'

/**
 * This sets `cookie` using the `res` object
 */

type Options = {
  expires?: Date
  maxAge?: number
}

export const setCookie = (
  res: NextApiResponse,
  name: string,
  value: unknown,
  options: Options = {}
) => {
  const stringValue =
    typeof value === 'object' ? 'j:' + JSON.stringify(value) : String(value)

  if ('maxAge' in options) {
    options.expires = new Date(Date.now() + options.maxAge)
    options.maxAge /= 1000
  }

  res.setHeader('Set-Cookie', serialize(name, String(stringValue), options))
}

// pages/api/cookies.ts

import { NextApiRequest, NextApiResponse } from 'next'
import { setCookie } from '../../utils/cookies'

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  // Calling our pure function using the `res` object, it will add the `set-cookie` header
  setCookie(res, 'Next.js', 'api-middleware!')
  // Return the `set-cookie` header so we can display it in the browser and show that it works!
  res.end(res.getHeader('Set-Cookie'))
}

export default handler

If you can't avoid these objects from being extended, you have to create your own type to include the extra properties:

// pages/api/foo.ts

import { NextApiRequest, NextApiResponse } from 'next'
import { withFoo } from 'external-lib-foo'

type NextApiRequestWithFoo = NextApiRequest & {
  foo: (bar: string) => void
}

const handler = (req: NextApiRequestWithFoo, res: NextApiResponse) => {
  req.foo('bar') // we can now use `req.foo` without type errors
  res.end('ok')
}

export default withFoo(handler)

Keep in mind this is not safe since the code will still compile even if you remove withFoo() from the export.

动态 API 路由Response Helpers