How to Integrate Wasabi with V0

Before writing any code, set up the Wasabi resources you need. Log in to the Wasabi console at console.wasabisys.com. Click Create Bucket in the Buckets section. Give the bucket a unique name (e.g., my-app-uploads), select a region — Wasabi has regions in the US, EU, and Asia-Pacific, all with the same pricing — and leave the default settings (versioning off, logging off) for now. Click Create Bucket. The endpoint URL for your bucket follows this pattern: s3.REGION.wasabisys.com. For example, us-east-1 is s3.wasabisys.com, eu-central-1 is s3.eu-central-1.wasabisys.com. Note your bucket's endpoint. Next, create an access key: go to Access Keys in the left navigation and click Create New Access Key. Wasabi shows you the access key ID and the secret access key once — copy both immediately and save them somewhere safe. The secret key is only shown once and cannot be recovered. Unlike AWS IAM, Wasabi's access keys have full access to all your buckets by default; there is no bucket-level IAM policy per key in the basic Wasabi console. For production apps with multiple services, consider using sub-users to scope access. Once you have the bucket name, endpoint, access key ID, and secret key, you have everything needed to configure the SDK.

Open V0 at v0.dev and describe the file upload interface you want. V0 generates React components with Tailwind CSS and shadcn/ui. For file uploads, be specific about the interaction: drag-and-drop zone, click-to-browse fallback, file type restrictions, upload progress indicator, and the success state. V0's generated code will use the browser's native File API and show a preview — at this stage, the upload logic will call a placeholder API route. Once the UI looks right in V0's preview, use Design Mode (Option+D) to refine the visual design without spending credits. Pay attention to how V0 structures the upload logic in the component — it will likely use a FormData object and a fetch call to your API route. Note the field name V0 uses for the file in the FormData (usually 'file') so you can match it in your API route. V0 may generate code that calls the storage service directly from the browser — you'll replace this with calls to your API route in a later step to keep credentials server-side. The key outcome of this step is a polished upload UI component that accepts a file, shows upload progress, and displays the result after completion.

In V0's code editor, create app/api/storage/route.ts. This API route handles file uploads and generates signed download URLs using the AWS SDK v3 configured for Wasabi. Install the required packages by adding @aws-sdk/client-s3 and @aws-sdk/s3-request-presigner to package.json. The critical configuration step is setting the endpoint field in the S3Client constructor to your Wasabi endpoint URL — this is what makes the AWS SDK connect to Wasabi instead of AWS. The endpoint format is https://s3.REGION.wasabisys.com. For uploads, the POST handler reads the FormData from the request, extracts the file, converts it to an ArrayBuffer, and calls PutObjectCommand. Always set ContentType from the file's type property so browsers can serve the file correctly later. For generating download URLs, the GET handler uses the getSignedUrl function from @aws-sdk/s3-request-presigner with a GetObjectCommand. Presigned URLs are time-limited — set expiresIn to a value in seconds (3600 for 1 hour, 86400 for 24 hours). For files that should be publicly accessible (like profile photos), you can also set a bucket policy in the Wasabi console to allow public read access and skip presigned URLs entirely. For the file key (the path inside the bucket), generate a unique name to avoid collisions: use a combination of a UUID and the original filename. The crypto.randomUUID() function is available in the Next.js App Router runtime without any import.

1import { S3Client, PutObjectCommand, GetObjectCommand, ListObjectsV2Command } from '@aws-sdk/client-s3';
2import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
3import { NextRequest } from 'next/server';
4
5const s3 = new S3Client({
6  endpoint: `https://${process.env.WASABI_ENDPOINT}`,
7  region: process.env.WASABI_REGION ?? 'us-east-1',
8  credentials: {
9    accessKeyId: process.env.WASABI_ACCESS_KEY_ID!,
10    secretAccessKey: process.env.WASABI_SECRET_ACCESS_KEY!,
11  },
12  forcePathStyle: true, // Required for Wasabi compatibility
13});
14
15const BUCKET = process.env.WASABI_BUCKET_NAME!;
16
17export async function POST(request: NextRequest) {
18  const formData = await request.formData();
19  const file = formData.get('file') as File | null;
20
21  if (!file) {
22    return Response.json({ error: 'No file provided' }, { status: 400 });
23  }
24
25  const key = `uploads/${crypto.randomUUID()}-${file.name.replace(/[^a-zA-Z0-9._-]/g, '_')}`;
26  const buffer = await file.arrayBuffer();
27
28  await s3.send(new PutObjectCommand({
29    Bucket: BUCKET,
30    Key: key,
31    Body: Buffer.from(buffer),
32    ContentType: file.type,
33  }));
34
35  // Generate a signed URL valid for 24 hours
36  const url = await getSignedUrl(
37    s3,
38    new GetObjectCommand({ Bucket: BUCKET, Key: key }),
39    { expiresIn: 86400 }
40  );
41
42  return Response.json({ key, url });
43}
44
45export async function GET(request: NextRequest) {
46  const { searchParams } = new URL(request.url);
47  const key = searchParams.get('key');
48
49  if (key) {
50    // Generate a fresh signed URL for an existing object
51    const url = await getSignedUrl(
52      s3,
53      new GetObjectCommand({ Bucket: BUCKET, Key: key }),
54      { expiresIn: 3600 }
55    );
56    return Response.json({ url });
57  }
58
59  // List all objects in the uploads prefix
60  const result = await s3.send(new ListObjectsV2Command({
61    Bucket: BUCKET,
62    Prefix: 'uploads/',
63    MaxKeys: 100,
64  }));
65
66  const files = (result.Contents ?? []).map((obj) => ({
67    key: obj.Key,
68    size: obj.Size,
69    lastModified: obj.LastModified,
70  }));
71
72  return Response.json({ files });
73}

With the API route written, add your Wasabi credentials to Vercel's environment variable system so they're available to the serverless function at runtime but never exposed in client-side JavaScript. Connect your V0 project to GitHub using V0's Git panel, then open your Vercel project at vercel.com/dashboard. Go to Settings → Environment Variables and add four variables. Set WASABI_ACCESS_KEY_ID to your access key ID. Set WASABI_SECRET_ACCESS_KEY to your secret access key. Set WASABI_BUCKET_NAME to your bucket name. Set WASABI_ENDPOINT to your bucket's endpoint hostname without the https:// prefix (e.g., s3.wasabisys.com for us-east-1 or s3.eu-central-1.wasabisys.com for EU). Optionally add WASABI_REGION matching the region code (e.g., us-east-1). For all variables, check all three environments: Production, Preview, and Development. Click Save after each. None of these variables should use the NEXT_PUBLIC_ prefix — they are server-only secrets and must never reach the browser. After adding variables, trigger a redeployment from the Vercel Dashboard. For local development, create a .env.local file with all five variables and add it to .gitignore. The same API route code reads from process.env in both environments — locally from .env.local, on Vercel from the Dashboard-configured variables.

1# .env.local — never commit to git
2WASABI_ACCESS_KEY_ID=your_access_key_id
3WASABI_SECRET_ACCESS_KEY=your_secret_access_key
4WASABI_BUCKET_NAME=your-bucket-name
5WASABI_ENDPOINT=s3.wasabisys.com
6WASABI_REGION=us-east-1

With the API route deployed and credentials configured, test the full upload and download flow. Push your project to GitHub from V0's Git panel to trigger a Vercel deployment. Once the deployment succeeds, open the production URL and test the file upload component. Select a file, watch the progress bar fill, and verify the returned URL. Click the URL to confirm the file is accessible from Wasabi's storage. To monitor the integration, check two places: the Vercel Dashboard → Functions tab shows API route invocations and any errors from the upload handler; the Wasabi console → Buckets → your bucket → Files shows the uploaded objects and their storage size. One critical V0-specific limitation to keep in mind: V0's browser preview sandbox cannot make outbound requests to Wasabi's API during in-browser testing. The upload functionality only works after deploying to Vercel. Design and test the UI layout in V0 preview with mock responses, then verify the actual Wasabi integration using the deployed Vercel URL. For apps that need users to upload very large files (over 100 MB), consider implementing multipart uploads using the S3 multipart upload API — it handles large files more reliably and shows granular progress. For complex storage architectures with multiple buckets, user-scoped prefixes, and file type validation, RapidDev can help design and implement a production-grade storage layer.