Next.js + AWS DynamoDB

This is an example of a Next.js application using DynamoDB for creating, updating, and deleting documents.

Demo

https://alt-text-generator.vercel.app/

How to Use

Option 1: Use an existing table.

Retrieve your existing access key, secret key, region and table name. Provide those values after clicking "Deploy" to automatically set the environment variables.

Option 2: Create a new table.

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/aws-dynamodb

1. Create a new IAM role with permission for AmazonDynamoDBFullAccess
2. Save the access key and secret key.
3. Create a new DynamoDB table with a primary key of id and type String (the sort key is optional).
4. Save the region and table name.
5. Create an .env.local file similar to .env.local.example.
6. Add the access key, secret key, region, and table name to .env.local.
7. Run pnpm dev to start the Next app at http://localhost:3000.

Deploy it to the cloud with Vercel (Documentation).

Credentials and Environment Variables

AWS credentials (e.g. AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY) and region configuration (e.g. AWS_REGION) can now be used directly as environment variables for Vercel deployments.

These variables are the default names expected by the AWS SDK, which means the user no longer has to configure credentials when using it. For example, this code is no longer necessary:

const s3 = new S3Client({
  accessKeyId: process.env.ACCESS_KEY,
  secretAccessKey: process.env.SECRET_ACCESS_KEY,
  region: process.env.REGION,
})

Instead, it can be replaced with this:

const s3 = new S3Client({});

The SDK will pick up the credentials from the environment automatically.

Testing

PUT

curl -X PUT http://localhost:3000/api/item -d '{"content": "test"}' -H "Content-type: application/json"

GET

curl http://localhost:3000/api/item\?id\=bdc38386-2b35-47a3-bdfc-8ee29bd0686f

POST

curl -X POST http://localhost:3000/api/item -d '{"content": "updated", "id": "bdc38386-2b35-47a3-bdfc-8ee29bd0686f"}' -H "Content-type: application/json"

DELETE

curl -X DELETE http://localhost:3000/api/item\?id\=bdc38386-2b35-47a3-bdfc-8ee29bd0686f