How to Integrate Amazon DynamoDB with V0

Open V0 at v0.dev and describe the interface that will display or manage DynamoDB data. The UI component should be specific about the data shape and interactions — V0 generates much better code when you describe the exact fields, table columns, and form inputs you need. For a dashboard displaying DynamoDB records, describe the table columns, filter options, and any inline edit or delete actions. For a form that writes to DynamoDB, describe the field types, validation requirements, and what happens after submission. V0 generates React components with Tailwind CSS and shadcn/ui that integrate cleanly with Next.js API routes. The component should use fetch() to call your API routes — GET requests for data loading (triggered in useEffect or using React Server Components with async/await), and POST/PUT/DELETE requests for write operations triggered by user actions. After generating, review the component's data-fetching code to confirm it targets the right API route paths. Use V0's Git panel to push the component to your GitHub repository, which triggers a Vercel preview deployment where you can verify the UI renders correctly even before connecting DynamoDB.

Create a shared DynamoDB client module and the API routes that perform database operations. The AWS SDK v3 DynamoDB client uses modular imports which keeps bundle size smaller than v2's monolithic import. The DynamoDBDocumentClient from @aws-sdk/lib-dynamodb is the recommended wrapper because it handles type marshaling automatically — you pass plain JavaScript objects to PutCommand and GetCommand returns plain JavaScript objects, without needing to wrap string values in { S: 'value' } format or unwrap them on read. Initialize the client at module level outside the route handler so it's reused across warm invocations of the same serverless function instance. The client reads AWS credentials from environment variables (AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_REGION) which you'll configure in Vercel's environment variable settings in the next step. For the API routes, follow the Next.js App Router pattern with route.ts files in the app/api/ directory. Create separate routes for different operations or use a single route.ts that handles GET for list/read and POST for create. Use the QueryCommand for fetching items by partition key (efficient, uses the index), and ScanCommand only for administrative operations since scans read every item in the table and are expensive at scale. Always include error handling that returns appropriate HTTP status codes — DynamoDB SDK throws typed errors you can catch specifically (like ConditionalCheckFailedException for failed conditional writes).

1// lib/dynamodb.ts
2import { DynamoDBClient } from '@aws-sdk/client-dynamodb';
3import { DynamoDBDocumentClient } from '@aws-sdk/lib-dynamodb';
4
5const client = new DynamoDBClient({
6  region: process.env.AWS_REGION || 'us-east-1',
7  credentials: {
8    accessKeyId: process.env.AWS_ACCESS_KEY_ID!,
9    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY!,
10  },
11});
12
13export const docClient = DynamoDBDocumentClient.from(client, {
14  marshallOptions: {
15    removeUndefinedValues: true, // Remove undefined values before storing
16    convertEmptyValues: false,   // Don't convert empty strings to null
17  },
18});
19
20export const TABLE_NAME = process.env.DYNAMODB_TABLE_NAME!;
21
22// app/api/dynamodb/records/route.ts
23import { NextRequest, NextResponse } from 'next/server';
24import {
25  GetCommand,
26  PutCommand,
27  QueryCommand,
28  DeleteCommand,
29} from '@aws-sdk/lib-dynamodb';
30import { docClient, TABLE_NAME } from '@/lib/dynamodb';
31
32// GET: Fetch all records for a partition key
33export async function GET(request: NextRequest) {
34  const { searchParams } = new URL(request.url);
35  const userId = searchParams.get('userId') || 'global';
36
37  try {
38    const result = await docClient.send(
39      new QueryCommand({
40        TableName: TABLE_NAME,
41        KeyConditionExpression: 'pk = :pk',
42        ExpressionAttributeValues: {
43          ':pk': `USER#${userId}`,
44        },
45        ScanIndexForward: false, // Sort descending (newest first)
46        Limit: 50,
47      })
48    );
49
50    return NextResponse.json({
51      records: result.Items ?? [],
52      count: result.Count ?? 0,
53    });
54  } catch (error) {
55    console.error('DynamoDB query error:', error);
56    return NextResponse.json(
57      { error: 'Failed to fetch records' },
58      { status: 500 }
59    );
60  }
61}
62
63// POST: Create a new record
64export async function POST(request: NextRequest) {
65  try {
66    const body = await request.json();
67    const { name, category, status, userId = 'global' } = body;
68
69    if (!name) {
70      return NextResponse.json(
71        { error: 'name is required' },
72        { status: 400 }
73      );
74    }
75
76    const id = crypto.randomUUID();
77    const now = new Date().toISOString();
78
79    const item = {
80      pk: `USER#${userId}`,
81      sk: `RECORD#${now}#${id}`,
82      id,
83      name,
84      category: category || 'general',
85      status: status || 'Active',
86      createdAt: now,
87      updatedAt: now,
88    };
89
90    await docClient.send(
91      new PutCommand({
92        TableName: TABLE_NAME,
93        Item: item,
94        ConditionExpression: 'attribute_not_exists(pk)', // Prevent overwrite
95      })
96    );
97
98    return NextResponse.json({ record: item }, { status: 201 });
99  } catch (error) {
100    console.error('DynamoDB put error:', error);
101    return NextResponse.json(
102      { error: 'Failed to create record' },
103      { status: 500 }
104    );
105  }
106}

Open the Vercel Dashboard, navigate to your project, and go to Settings → Environment Variables. Add four variables that the DynamoDB client requires: AWS_ACCESS_KEY_ID with your IAM user's access key ID, AWS_SECRET_ACCESS_KEY with the secret access key (keep this strictly server-side — never add NEXT_PUBLIC_ to either AWS credential), AWS_REGION with the region where your DynamoDB table was created (e.g., us-east-1, eu-west-1), and DYNAMODB_TABLE_NAME with the exact name of your table. None of these variables should have the NEXT_PUBLIC_ prefix — all DynamoDB operations happen in server-side API routes where process.env variables are accessible. The AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY must belong to an IAM user or role with DynamoDB permissions. For least-privilege security, create a dedicated IAM policy that grants only the specific DynamoDB actions your app needs (dynamodb:GetItem, dynamodb:PutItem, dynamodb:Query, dynamodb:UpdateItem, dynamodb:DeleteItem on your specific table ARN) rather than granting full DynamoDB access. After adding all four variables and clicking Save, trigger a redeployment from the Deployments tab or push a new commit. Test that the variables are available by adding a temporary log statement in your API route: console.log('Region:', process.env.AWS_REGION) — check the Vercel function logs under the deployment to confirm it prints the correct value.

With environment variables configured and your app deployed, test the full data flow from your V0-generated UI through the API routes to DynamoDB and back. Open your deployed app and trigger a create operation from the form — this should POST to your API route, which calls DynamoDB's PutCommand and returns the created item. Then verify the item appears in the data table by triggering a read (page load or refresh), which calls QueryCommand and returns the stored records. Check the Vercel function logs (Vercel Dashboard → Deployments → Functions tab) if any errors occur — DynamoDB errors surface as typed exceptions with descriptive messages. The most common errors at this stage are ResourceNotFoundException (table name is wrong or the region doesn't match), AccessDeniedException (IAM credentials lack the required DynamoDB permissions), and ValidationException (the key schema in your PutCommand doesn't match the table's actual partition and sort key names). For local development, create a .env.local file with the same four environment variables so you can test with npm run dev. DynamoDB's free tier includes 25 GB of storage and 200 million requests per month — more than enough for development and early production. For apps with high write throughput, enable DynamoDB Streams to capture change events and trigger downstream processing without polling.