How to Integrate AWS S3 with V0

Start by creating an S3 bucket in the AWS Console and configuring CORS (Cross-Origin Resource Sharing). CORS is required because your browser will make direct HTTP requests to S3 from your Vercel domain — S3 needs to explicitly allow this. Go to the AWS Console (console.aws.amazon.com), search for S3, and click Create bucket. Choose a name (e.g., 'my-app-uploads'), select your preferred region (pick one geographically close to your users), and leave Block Public Access enabled for now — you will control access via pre-signed URLs, not public permissions. After creating the bucket, click on it, go to the Permissions tab, scroll down to Cross-origin resource sharing (CORS), and click Edit. Paste the CORS configuration below. This allows PUT requests from your app's domain and any localhost port during development. Replace https://your-app.vercel.app with your actual Vercel deployment URL. Next, create an IAM user for programmatic access. Go to IAM in the AWS Console, click Users → Create user. Give it a name like 'v0-app-s3-user'. On the permissions step, select Attach policies directly and create an inline policy that allows only s3:PutObject and s3:GetObject on your specific bucket (arn:aws:s3:::your-bucket-name/*). Scoping permissions to only your bucket and only the actions you need limits damage if credentials are ever compromised. Finally, under Security credentials, create an Access Key — choose Application running outside AWS as the use case and download the CSV with your Access Key ID and Secret.

1[
2  {
3    "AllowedHeaders": ["*"],
4    "AllowedMethods": ["PUT", "GET"],
5    "AllowedOrigins": [
6      "http://localhost:3000",
7      "https://your-app.vercel.app"
8    ],
9    "ExposeHeaders": ["ETag"],
10    "MaxAgeSeconds": 3000
11  }
12]

Use V0 to generate the file upload interface for your app. V0 can create polished drag-and-drop zones, file preview grids, progress indicators, and file list components using Tailwind CSS and shadcn/ui components. When prompting V0, describe the exact upload flow: the user selects or drops a file, your component makes a GET request to /api/upload/signed-url with the filename and file type, receives a pre-signed URL and the final S3 object key, then makes a PUT request directly to the pre-signed URL with the file as the request body. Tell V0 to track upload progress using the XMLHttpRequest upload progress event or a fetch wrapper. Important: the standard fetch API does not support upload progress events. To show a progress bar during upload, use XMLHttpRequest with its upload.onprogress event, or a library like axios that wraps XHR. Ask V0 to implement this correctly if a progress indicator is important for your UX. Also ask V0 to handle file type and size validation client-side before requesting the pre-signed URL. This prevents wasted API calls for rejected files and gives instant feedback to users.

AWS SDK v3 uses a modular package architecture — you only install the S3 client package rather than the entire SDK. Install @aws-sdk/client-s3 and @aws-sdk/s3-request-presigner as dependencies in your Next.js project. Create the API route at app/api/upload/signed-url/route.ts. This route accepts a GET request with filename and type (MIME type) query parameters. It uses the S3 client to generate a pre-signed PUT URL that allows the browser to upload directly to your bucket — the pre-signed URL is cryptographically signed with your AWS credentials and encodes the allowed operation, bucket, key, content type, and expiration time. The key name (S3 object key) should be unique for each upload. Use a combination of a UUID (or timestamp) and the original filename to prevent collisions and overwriting: for example, uploads/1234567890-profile.jpg. Return both the signedUrl (for the PUT request) and the key (to save in your database as a reference to the uploaded file). Set the expiresIn to a short window — 3600 seconds (1 hour) is generous; even 300 seconds (5 minutes) is enough for a user to complete an upload. The pre-signed URL becomes invalid after expiration, so attackers cannot use an intercepted URL to upload malicious files later. Also create a companion route at app/api/upload/download-url/route.ts for generating pre-signed GET URLs when users need to download or view their files. This route accepts a key parameter and returns a time-limited URL that can be used in img src attributes or download links.

1// app/api/upload/signed-url/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
4import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
5
6const s3 = new S3Client({
7  region: process.env.AWS_REGION!,
8  credentials: {
9    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
10    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
11  },
12});
13
14export async function GET(request: NextRequest) {
15  const { searchParams } = new URL(request.url);
16  const filename = searchParams.get('filename');
17  const type = searchParams.get('type');
18
19  if (!filename || !type) {
20    return NextResponse.json(
21      { error: 'filename and type are required' },
22      { status: 400 }
23    );
24  }
25
26  const key = `uploads/${Date.now()}-${filename.replace(/[^a-zA-Z0-9._-]/g, '_')}`;
27
28  const command = new PutObjectCommand({
29    Bucket: process.env.AWS_S3_BUCKET_NAME!,
30    Key: key,
31    ContentType: type,
32  });
33
34  const signedUrl = await getSignedUrl(s3, command, { expiresIn: 300 });
35
36  return NextResponse.json({ signedUrl, key });
37}

Your AWS S3 API route depends on four environment variables. Add them in Vercel Dashboard → Settings → Environment Variables with scope set to Production, Preview, and Development. AWS_ACCESS_KEY_ID: the Access Key ID from the IAM user you created. This is not technically a secret in the same way as the secret key — it is often visible in request headers — but keeping it as an environment variable is good practice. AWS_SECRET_ACCESS_KEY: the Secret Access Key. This IS a true secret — it proves you are authorized to generate signed URLs for your bucket. Never prefix with NEXT_PUBLIC_ and never commit to Git. AWS_REGION: the AWS region where your S3 bucket is located, e.g., us-east-1 or eu-west-1. This must exactly match the region you selected when creating the bucket. AWS_S3_BUCKET_NAME: the name of your S3 bucket. This is not secret but making it configurable allows you to use different buckets per environment. For local development, add these same variables to a .env.local file in your project root. V0-generated Next.js projects include .env.local in .gitignore by default, so your credentials will not be committed. After saving the variables, trigger a redeployment by pushing a commit to GitHub. Test the upload flow end-to-end by uploading a small test file through your app's UI — confirm the file appears in your S3 bucket in the AWS Console.