Next.js × microCMSで画像がPOSTできなかった話

Next.jsとmicroCMSを使ったブログサイトを個人開発しています。

フロント側でアップロードした画像をサーバー側へ渡し、microCMSのAPI経由でmediaをPOSTしたかったのですが、2日かけてようやく画像ファイルをコンテンツに保存できたので、その解決策を備忘録として残します。

【POSTの仕方】

1. インプットで画像ファイルを読み込む

<input type='file' onChange={handleChangeMedia} />

2. handleChangeで画像ファイルのURLを取得

  const handleChangeMedia = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return
    const file = e.target.files[0]

    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      const dataUrl = reader.result
      setUrl(dataUrl as string)
    }
  }

3.NextのAPIからmicroCMSへ画像をアップロードする

import { NextRequest, NextResponse } from 'next/server'
import { managementClient } from '../../../libs/client'
import { client } from '../../../libs/client'

export async function POST(req: NextRequest, res: NextResponse) {
  // setUrlにセットされたurlをリクエストで投げてる
  const { url } = await req.json()

  const response = await managementClient.uploadMedia({
    data: url,
    name: 'image.png', // 適当
  })

  const fileURL = response.url

  const fileResponse = await client.create({
    endpoint: 'media',
    content: {
      media: fileURL,
    },
  })

  return NextResponse.json(fileResponse)
}

以上