\n {images.blobs.map((image) => (\n \n ))}\n

\n );\n}"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"API ルート"},{"type":"text","text":"を使用してアップロード"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"fetch"},{"type":"text","text":"を使用してアップロード"}]},{"type":"codeBlockWithFilename","attrs":{"language":"tsx","filename":null,"codeBlock":null},"content":[{"type":"text","text":"\"use client\";\n\nimport type { PutBlobResult } from \"@vercel/blob\";\nimport { useState, useRef } from \"react\";\n\nexport default function AvatarUploadPage() {\n // input要素のDOM\n const inputFileRef = useRef(null);\n // アップロードしたVercelBlob画像\n const [blob, setBlob] = useState(null);\n // サブミット送信イベント\n const onSubmit = async (event) => {\n event.preventDefault();\n // ファイルの存在確認\n if (!inputFileRef.current?.files) {\n throw new Error(\"No file selected\");\n }\n // ファイル取得\n const file = inputFileRef.current.files[0];\n // 画像アップロードAPIにPOSTリクエスト\n const response = await fetch(\n\t\t`/api/avatar/upload?filename=${file.name}`, {\n\t\tmethod: \"POST\",\n\t\tbody: file,\n\t});\n // 新しい画像データをVercelBlobの型で取得\n const newBlob = (await response.json()) as PutBlobResult;\n // 格納\n setBlob(newBlob);\n };\n\n // ...\n}"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"画像アップロードAPIルートの作成"}]},{"type":"codeBlockWithFilename","attrs":{"language":"ts","filename":null,"codeBlock":null},"content":[{"type":"text","text":"// src/app/api/avatar/upload/route.ts\nimport { put } from '@vercel/blob';\nimport { NextResponse } from 'next/server';\n \nexport async function POST(request: Request): Promise; {\n // クエリパラメータを取得\n const { searchParams } = new URL(request.url);\n // ファイル名を取得\n const filename = searchParams.get('filename');\n // Vercel Blobにアップロード\n const blob = await put(filename, request.body, {\n access: 'public',\n });\n \n return NextResponse.json(blob);\n}"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","text":"SDK"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"put()"}]},{"type":"paragraph","content":[{"type":"text","text":"この"},{"type":"text","marks":[{"type":"code"}],"text":"put"},{"type":"text","text":"メソッドは、Blob オブジェクトを Blob ストアにアップロードします。"}]},{"type":"codeBlockWithFilename","attrs":{"language":"ts","filename":null,"codeBlock":null},"content":[{"type":"text","text":"put(pathname, body, options);"}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"パラメータ"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"pathname"},{"type":"text","text":": (必須) 戻り URL の基本値を指定する文字列"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"body"},{"type":"text","text":": (必須)これらの"},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.mozilla.org/docs/Web/API/fetch#body","target":"_blank","rel":"noopener","class":"link_link__hbWKh link_highlight__kJZF9"}}],"text":"サポートされているボディタイプ"},{"type":"text","marks":[{"type":"code"}],"text":"ReadableStream"},{"type":"text","text":"に基づく、"},{"type":"text","marks":[{"type":"code"}],"text":"String"},{"type":"text","text":"、、"},{"type":"text","marks":[{"type":"code"}],"text":"ArrayBuffer"},{"type":"text","text":"またはとしての BLOB オブジェクト"},{"type":"text","marks":[{"type":"code"}],"text":"Blob"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"options"},{"type":"text","text":": (必須)"},{"type":"text","marks":[{"type":"code"}],"text":"JSON"},{"type":"text","text":"次の必須パラメータとオプションのパラメータを持つオブジェクト:"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"オプション"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"返り値の例"}]},{"type":"codeBlockWithFilename","attrs":{"language":"json","filename":null,"codeBlock":null},"content":[{"type":"text","text":"{\n pathname: 'profilesv1/user-12345.txt',\n contentType: 'text/plain',\n contentDisposition: 'attachment; filename=\"user-12345.txt\"',\n url: 'https://ce0rcu23vrrdzqap.public.blob.vercel-storage.com/profilesv1/user-12345-NoOVGDVcqSPc7VYCUAGnTzLTG2qEM2.txt'\n downloadUrl: 'https://ce0rcu23vrrdzqap.public.blob.vercel-storage.com/profilesv1/user-12345-NoOVGDVcqSPc7VYCUAGnTzLTG2qEM2.txt?download=1'\n}"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"del()"}]},{"type":"paragraph","content":[{"type":"text","text":"この"},{"type":"text","marks":[{"type":"code"}],"text":"del"},{"type":"text","text":"メソッドは、BLOB ストアから BLOB オブジェクトを削除します。"}]},{"type":"codeBlockWithFilename","attrs":{"language":"ts","filename":null,"codeBlock":null},"content":[{"type":"text","text":"del(url, options);"}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"パラメータ"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"url"},{"type":"text","text":": (必須) 削除する BLOB オブジェクトの一意の URL を指定する文字列または文字列の配列"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"options"},{"type":"text","text":": (オプション)"},{"type":"text","marks":[{"type":"code"}],"text":"JSON"},{"type":"text","text":"次のオプションのパラメータを持つオブジェクト:"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"オプション"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}},{"type":"bold"}],"text":"token"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}}],"text":": "},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(68, 68, 68)"}}],"text":"リクエストを行うときに使用する読み取り/書き込みトークンを指定する文字列。"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(23, 23, 23)"}}],"text":"head()"}]},{"type":"paragraph","content":[{"type":"text","text":"この"},{"type":"text","marks":[{"type":"code"}],"text":"head"},{"type":"text","text":"メソッドは、BLOB オブジェクトのメタデータを返します。"}]},{"type":"codeBlockWithFilename","attrs":{"language":"ts","filename":null,"codeBlock":null},"content":[{"type":"text","text":"head(url, options);"}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"パラメータ"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"url"},{"type":"text","text":": (必須) 削除する BLOB オブジェクトの一意の URL を指定する文字列または文字列の配列"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"options"},{"type":"text","text":": (オプション)"},{"type":"text","marks":[{"type":"code"}],"text":"JSON"},{"type":"text","text":"次のオプションのパラメータを持つオブジェクト"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"オプション"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}},{"type":"bold"}],"text":"token"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}}],"text":": "},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(68, 68, 68)"}}],"text":"リクエストを行うときに使用する読み取り/書き込みトークンを指定する文字列。"}]}]}]},{"type":"heading","attrs":{"level":4}},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"list()"}]},{"type":"paragraph","content":[{"type":"text","text":"この"},{"type":"text","marks":[{"type":"code"}],"text":"list"},{"type":"text","text":"メソッドは、Blob ストア内の BLOB オブジェクトのリストを返します。"}]},{"type":"codeBlockWithFilename","attrs":{"language":"tsx","filename":null,"codeBlock":null},"content":[{"type":"text","text":"list(options);"}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"パラメータ"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"options"},{"type":"text","text":": (オプション)"},{"type":"text","marks":[{"type":"code"}],"text":"JSON"},{"type":"text","text":"次のオプションのパラメータを持つオブジェクト:"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"オプション"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}},{"type":"bold"}],"text":"token"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}}],"text":": "},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(68, 68, 68)"}}],"text":"リクエストを行うときに使用する読み取り/書き込みトークンを指定する文字列。"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}},{"type":"bold"}],"text":"limit"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}}],"text":": "},{"type":"text","text":"返される BLOB オブジェクトの最大数を指定する数値。デフォルトは 1000 です。"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}},{"type":"bold"}],"text":"prefix"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}}],"text":": "},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(68, 68, 68)"}}],"text":"特定のフォルダー名でフィルターするための文字列。"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}},{"type":"bold"}],"text":"cursor"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}}],"text":": "},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(68, 68, 68)"}}],"text":"結果のページネーションのために前の応答から取得した文字列。"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}},{"type":"bold"}],"text":"mode"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}}],"text":": "},{"type":"text","text":"応答形式を指定する文字列。expanded(デフォルト)。"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(0, 0, 0)"}}],"text":"foldedで"},{"type":"text","marks":[{"type":"textStyle","attrs":{"color":"rgb(68, 68, 68)"}}],"text":"1 つのフォルダー文字列エントリ。"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"返り値の例"}]},{"type":"codeBlockWithFilename","attrs":{"language":"ts","filename":null,"codeBlock":null},"content":[{"type":"text","text":"blobs: {\n size: `number`;\n uploadedAt: `Date`;\n pathname: `string`;\n url: `string`;\n downloadUrl: `string`\n}[]\ncursor?: `string`;\nhasMore: `boolean`;\nfolders?: `string[]`"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","text":"copy()"}]},{"type":"paragraph","content":[{"type":"text","text":"この"},{"type":"text","marks":[{"type":"code"}],"text":"copy"},{"type":"text","text":"メソッドは、既存の BLOB オブジェクトを BLOB ストア内の新しいパスにコピーします。"}]},{"type":"codeBlockWithFilename","attrs":{"language":"ts","filename":null,"codeBlock":null},"content":[{"type":"text","text":"copy(fromUrl, toPathname, options);"}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"パラメータ"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"fromUrl"},{"type":"text","text":": (必須) 既存の BLOB を識別する BLOB URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"toPathname"},{"type":"text","text":": (必須) BLOB ストア内の新しいパスを指定する文字列。これは戻り URL の基本値になります。"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"options"},{"type":"text","text":": (必須)"},{"type":"text","marks":[{"type":"code"}],"text":"JSON"},{"type":"text","text":"次の必須パラメータとオプションのパラメータを持つオブジェクト:"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"オプション"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"access"},{"type":"text","text":": 必須。"},{"type":"text","marks":[{"type":"code"}],"text":"public"},{"type":"text","text":"- "},{"type":"text","marks":[{"type":"code"}],"text":"private"},{"type":"text","text":"のサポートが予定されています"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"contentType"},{"type":"text","text":": メディアの種類を示す文字列。デフォルトでは、toPathname の拡張子から抽出されます。"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"token"},{"type":"text","text":": リクエストを行うときに使用するトークンを指定する文字列。"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"addRandomSuffix"},{"type":"text","text":": パス名にランダムなサフィックスを追加するかどうかを指定するブール値。デフォルトは"},{"type":"text","marks":[{"type":"code"}],"text":"false"},{"type":"text","text":"です"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"cacheControlMaxAge: "},{"type":"text","text":"エッジおよびブラウザーのキャッシュを構成する秒数。デフォルトは 1 年。"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"type":"text","text":"返り値の例"}]},{"type":"codeBlockWithFilename","attrs":{"language":"json","filename":null,"codeBlock":null},"content":[{"type":"text","text":"{\n pathname: 'profilesv1/user-12345-copy.txt',\n contentType: 'text/plain',\n contentDisposition: 'attachment; filename=\"user-12345-copy.txt\"',\n url: 'https://ce0rcu23vrrdzqap.public.blob.vercel-storage.com/profilesv1/user-12345-copy.txt'\n downloadUrl: 'https://ce0rcu23vrrdzqap.public.blob.vercel-storage.com/profilesv1/user-12345-copy.txt?download=1'\n}"}]}]}

Vercel Blobのファイルストレージを使って画像をNext.jsで操作する