エンジニアリング

Next.js × Vercel Blobで画像アップロードを実装

2024.08.31
2024.12.04

本章では、Vercel Blobを導入して画像アップロードを実装していきます。

システム概要のうち以下の部分にあたります。

1 チュートリアルの全体像
2 Vercel Blob導入
- 2.1 Blob作成
- 2.2 環境変数設定
3 SDKインストール
4 画像アップロード実装
- 4.1 投稿作成
- 4.2 プロフィールアイコン変更
5 まとめ

チュートリアルの全体像

本チュートリアルを通じて学べる内容は以下のようになります。

動画で学びたい方はこちらから！

Vercel Blob導入

Blob作成

Storageタブをクリックして、「Create Database」をクリックします。

Blobを選択してContinueを押しましょう。

名前はそのままでCreateボタンを押します。

Connectボタンを押します。

これでBlobの作成と連携が完了しました。

続いて環境変数を設定していきます。

環境変数設定

再びStorageタブを選択すると、Blobが新しく作成されているので、クリックします。

.env.localのタブをクリックしてください。

「Copy Snippet」ボタンを押して環境変数をコピーします。

最後に .env ファイルに貼り付けます。

これでプロジェクトからBlobにアクセスできるようになりました。

SDKインストール

続いてVercel BlobのSDKをインストールします。

npm i @vercel/blob

Blobに画像をアップロードするときはこちらのSDKを使って行います。

画像アップロード実装

それでは、準備ができたので実際に画像アップロードを実装していきましょう。

投稿作成

lib/actions.ts

import { put } from "@vercel/blob";

/* ... 省略 ... */

export async function createPost(formData: FormData) {
  const email = "user+1@example.com";
  const caption = formData.get("caption") as string;
  const imageFile = formData.get("image") as File;
  const blob = await put(imageFile.name, imageFile, {
    access: "public",
  });

  const user = await prisma.user.findFirstOrThrow({
    where: { email },
  });

  await prisma.post.create({
    data: {
      caption,
      image: blob.url,
      userId: user.id,
    },
  });

  revalidatePath("/dashboard");
  redirect("/dashboard");
}

実際に試してみましょう。

http://localhost:3000/posts/create

に移動して、ファイル選択とキャプションを入力して「公開」ボタンを押しましょう。

実はこのままではエラーが出ます。

Next.jsのImageタグは指定したドメイン以外の画像を読み込まない仕様になっています。

そのため、以下の記述を追加しましょう。

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "hoyw5roiqu7mak0o.public.blob.vercel-storage.com",
      },
    ],
  },
  experimental: {
    serverActions: {
      bodySizeLimit: "45mb",
    },
  },
};

export default nextConfig;

bodySizeLimitの方は、ServerActionsの最大リクエストサイズの設定です。

デフォルトでは1MBなので、こちらを増やしました。

再び、投稿を作成してみましょう。

正常に投稿ができるはずです。

プロフィールアイコン変更

続いてプロフィールアイコンを変更できるようにしましょう。

lib/actions.ts

export async function updateMe(formData: FormData) {
  const email = "user+1@example.com";
  const user = await prisma.user.findFirstOrThrow({
    where: { email },
  });

  const data = {
    name: formData.get("name") as string,
    description: formData.get("description") as string,
    image: user.image,
  };

  const imageFile = formData.get("image") as File;
  if (imageFile.size > 0) {
    const blob = await put(imageFile.name, imageFile, {
      access: "public",
    });
    data.image = blob.url;
  }

  await prisma.user.update({
    where: { email },
    data,
  });

  revalidatePath("/dashboard");
  redirect("/dashboard");
}