AWS DynamoDB with Next.js API Routes
Type: Code
Framework: Next.js
CSS: Vanilla CSS
- Project Description: A Next.js application demonstrating CRUD operations (Create, Read, Update, Delete) using AWS DynamoDB for document management.
- Demo: Experience the application live at https://alt-text-generator.vercel.app/.
Usage Options:
- Existing DynamoDB Table:
- Retrieve AWS access key, secret key, region, and table name.
- Provide these values upon deployment to set environment variables automatically.
- New DynamoDB Table Setup:
- Bootstrap the project with
pnpm create next-app
using the provided example URL. - Create a new IAM role with AmazonDynamoDBFullAccess permissions.
- Save the access key, secret key, and create a new DynamoDB table with a primary key
id
of type String. - Configure
.env.local
with the AWS credentials and table details. - Launch the Next.js application using
pnpm dev
and access it athttp://localhost:3000
. - Deploy to Vercel following their documentation.
- Bootstrap the project with
Credentials and Environment Variables:
- AWS credentials and region can be directly set as environment variables for Vercel deployments (e.g.,
AWS_ACCESS_KEY_ID
,AWS_SECRET_ACCESS_KEY
,AWS_REGION
). - The AWS SDK automatically detects these environment variables, simplifying the code by eliminating the need to manually pass credentials to AWS client instances.
Testing CRUD Operations:
- PUT: Add a new item with a content field.
- GET: Retrieve an item by its
id
. - POST: Update an existing item’s content by specifying its
id
. - DELETE: Remove an item by its
id
.