How to Integrate Bolt.new with Amazon DynamoDB

1# .env.local
2AWS_ACCESS_KEY_ID=your_access_key_id
3AWS_SECRET_ACCESS_KEY=your_secret_access_key
4AWS_REGION=us-east-1
5DYNAMODB_TABLE=Items

1// src/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 ddbClient = DynamoDBDocumentClient.from(client, {
14  marshallOptions: {
15    // Remove undefined values instead of encoding as DynamoDB NULL
16    removeUndefinedValues: true,
17    // Convert JavaScript Date objects to ISO strings
18    convertClassInstanceToMap: false,
19  },
20  unmarshallOptions: {
21    // Return numbers as regular JS numbers, not BigInt
22    wrapNumbers: false,
23  },
24});
25
26export const TABLE = process.env.DYNAMODB_TABLE ?? 'Items';

1// app/api/items/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import {
4  GetCommand,
5  PutCommand,
6  DeleteCommand,
7  ScanCommand,
8  UpdateCommand,
9} from '@aws-sdk/lib-dynamodb';
10import { ddbClient, TABLE } from '@/lib/dynamodb';
11
12// GET /api/items or GET /api/items?itemId=xxx
13export async function GET(request: NextRequest) {
14  try {
15    const itemId = request.nextUrl.searchParams.get('itemId');
16
17    if (itemId) {
18      const result = await ddbClient.send(new GetCommand({
19        TableName: TABLE,
20        Key: { itemId },
21      }));
22      if (!result.Item) return NextResponse.json({ error: 'Item not found' }, { status: 404 });
23      return NextResponse.json({ item: result.Item });
24    }
25
26    const result = await ddbClient.send(new ScanCommand({ TableName: TABLE }));
27    return NextResponse.json({ items: result.Items ?? [] });
28  } catch (err: any) {
29    return NextResponse.json({ error: err.message }, { status: 500 });
30  }
31}
32
33// POST /api/items — create new item
34export async function POST(request: NextRequest) {
35  try {
36    const body = await request.json();
37    const item = {
38      itemId: crypto.randomUUID(),
39      createdAt: new Date().toISOString(),
40      ...body,
41    };
42
43    await ddbClient.send(new PutCommand({ TableName: TABLE, Item: item }));
44    return NextResponse.json({ item }, { status: 201 });
45  } catch (err: any) {
46    return NextResponse.json({ error: err.message }, { status: 500 });
47  }
48}
49
50// PUT /api/items — update item fields
51export async function PUT(request: NextRequest) {
52  try {
53    const { itemId, ...updates } = await request.json();
54    if (!itemId) return NextResponse.json({ error: 'itemId required' }, { status: 400 });
55
56    const updateExpression = 'SET ' + Object.keys(updates).map((k, i) => `#f${i} = :v${i}`).join(', ');
57    const expressionNames = Object.fromEntries(Object.keys(updates).map((k, i) => [`#f${i}`, k]));
58    const expressionValues = Object.fromEntries(Object.keys(updates).map((k, i) => [`:v${i}`, updates[k]]));
59
60    await ddbClient.send(new UpdateCommand({
61      TableName: TABLE,
62      Key: { itemId },
63      UpdateExpression: updateExpression,
64      ExpressionAttributeNames: expressionNames,
65      ExpressionAttributeValues: expressionValues,
66    }));
67
68    return NextResponse.json({ ok: true });
69  } catch (err: any) {
70    return NextResponse.json({ error: err.message }, { status: 500 });
71  }
72}
73
74// DELETE /api/items?itemId=xxx
75export async function DELETE(request: NextRequest) {
76  try {
77    const itemId = request.nextUrl.searchParams.get('itemId');
78    if (!itemId) return NextResponse.json({ error: 'itemId required' }, { status: 400 });
79
80    await ddbClient.send(new DeleteCommand({ TableName: TABLE, Key: { itemId } }));
81    return NextResponse.json({ ok: true });
82  } catch (err: any) {
83    return NextResponse.json({ error: err.message }, { status: 500 });
84  }
85}

1// app/page.tsx
2'use client';
3import { useEffect, useState } from 'react';
4
5interface Item {
6  itemId: string;
7  name: string;
8  description?: string;
9  createdAt: string;
10}
11
12export default function Home() {
13  const [items, setItems] = useState<Item[]>([]);
14  const [loading, setLoading] = useState(true);
15  const [showForm, setShowForm] = useState(false);
16  const [formData, setFormData] = useState({ name: '', description: '' });
17  const [submitting, setSubmitting] = useState(false);
18
19  useEffect(() => {
20    fetch('/api/items')
21      .then(r => r.json())
22      .then(data => {
23        setItems(data.items ?? []);
24        setLoading(false);
25      })
26      .catch(() => setLoading(false));
27  }, []);
28
29  const createItem = async (e: React.FormEvent) => {
30    e.preventDefault();
31    setSubmitting(true);
32    const res = await fetch('/api/items', {
33      method: 'POST',
34      headers: { 'Content-Type': 'application/json' },
35      body: JSON.stringify(formData),
36    });
37    const data = await res.json();
38    setItems(prev => [data.item, ...prev]);
39    setFormData({ name: '', description: '' });
40    setShowForm(false);
41    setSubmitting(false);
42  };
43
44  const deleteItem = async (itemId: string) => {
45    await fetch(`/api/items?itemId=${itemId}`, { method: 'DELETE' });
46    setItems(prev => prev.filter(item => item.itemId !== itemId));
47  };
48
49  return (
50    <div className="max-w-4xl mx-auto p-6">
51      <div className="flex justify-between items-center mb-6">
52        <h1 className="text-2xl font-bold">DynamoDB Items</h1>
53        <button onClick={() => setShowForm(!showForm)} className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
54          Add Item
55        </button>
56      </div>
57
58      {showForm && (
59        <form onSubmit={createItem} className="border rounded-lg p-4 mb-6 bg-gray-50">
60          <div className="grid grid-cols-2 gap-4">
61            <input value={formData.name} onChange={e => setFormData(p => ({ ...p, name: e.target.value }))}
62              placeholder="Name" required className="border rounded px-3 py-2" />
63            <input value={formData.description} onChange={e => setFormData(p => ({ ...p, description: e.target.value }))}
64              placeholder="Description" className="border rounded px-3 py-2" />
65          </div>
66          <button type="submit" disabled={submitting} className="mt-3 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 disabled:opacity-50">
67            {submitting ? 'Creating...' : 'Create Item'}
68          </button>
69        </form>
70      )}
71
72      {loading ? (
73        <p className="text-gray-500">Loading items...</p>
74      ) : (
75        <table className="w-full border rounded-lg overflow-hidden">
76          <thead className="bg-gray-100">
77            <tr>
78              <th className="text-left p-3 font-semibold">Name</th>
79              <th className="text-left p-3 font-semibold">Description</th>
80              <th className="text-left p-3 font-semibold">Created</th>
81              <th className="p-3"></th>
82            </tr>
83          </thead>
84          <tbody>
85            {items.map(item => (
86              <tr key={item.itemId} className="border-t hover:bg-gray-50">
87                <td className="p-3 font-medium">{item.name}</td>
88                <td className="p-3 text-gray-600">{item.description ?? '--'}</td>
89                <td className="p-3 text-sm text-gray-400">{new Date(item.createdAt).toLocaleDateString()}</td>
90                <td className="p-3">
91                  <button onClick={() => deleteItem(item.itemId)} className="text-red-500 hover:text-red-700 text-sm">Delete</button>
92                </td>
93              </tr>
94            ))}
95          </tbody>
96        </table>
97      )}
98    </div>
99  );
100}

1// app/api/items/by-user/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { QueryCommand } from '@aws-sdk/lib-dynamodb';
4import { ddbClient, TABLE } from '@/lib/dynamodb';
5
6export async function GET(request: NextRequest) {
7  try {
8    const userId = request.nextUrl.searchParams.get('userId');
9    if (!userId) return NextResponse.json({ error: 'userId required' }, { status: 400 });
10
11    // Requires a GSI with userId as partition key
12    // GSI name: UserIdIndex, partition key: userId
13    const result = await ddbClient.send(new QueryCommand({
14      TableName: TABLE,
15      IndexName: 'UserIdIndex',
16      KeyConditionExpression: 'userId = :userId',
17      ExpressionAttributeValues: { ':userId': userId },
18      ScanIndexForward: false, // Most recent first (requires sort key)
19      Limit: 50,
20    }));
21
22    return NextResponse.json({
23      items: result.Items ?? [],
24      nextCursor: result.LastEvaluatedKey
25        ? JSON.stringify(result.LastEvaluatedKey)
26        : null,
27    });
28  } catch (err: any) {
29    return NextResponse.json({ error: err.message }, { status: 500 });
30  }
31}