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-appusing 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
idof type String. - Configure
.env.localwith the AWS credentials and table details. - Launch the Next.js application using
pnpm devand 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.