next-connectにexpress-validatorを導入する

公開日時

Next.jsアプリのAPI側のroutingにnext-connectを使っている。

expressよりもシンプルな仕様になっているが、middlewareの機構があるのでwrapperを作ればexpressのmiddlewareを使うことも出来る。

下記記事を参考にnext-connectにexpress-validatorを組み込んでみた。

まずはexpress-validatorのwrapperとして[[validator.ts]]を作成。

import { ValidationChain, validationResult } from 'express-validator'
import { NextApiRequest, NextApiResponse } from 'next'
import { NextHandler } from 'next-connect'

export const validator = (validations: ValidationChain[], result: typeof validationResult) => {
  return async (req: NextApiRequest, res: NextApiResponse, next: NextHandler) => {
    await Promise.all(validations.map((validation) => validation.run(req)))

    const errors = result(req)
    if (errors.isEmpty()) {
      return next()
    }

    return res.status(422).json({ errors: errors.array() })
  }
}

あとは以下のように各APIのhandlerでuse(validator)を呼び出せばexpress-validatorによるバリデーションをかけることができる。

import { NextApiRequest, NextApiResponse } from 'next'
import nc from 'next-connect'

const postUserValidateBody = [
  body('name').isLength({ min: 1, max: 100 })
]

const handler = nc<NextApiRequest, NextApiResponse>()
  .use(validator(postUserValidateBody, validationResult))

Related #js