Starter

AWS S3 Image Upload

Type: Code

Framework: Next.js

CSS: Vanilla CSS

Database: AWS S3

Overview: A Next.js application example enabling photo uploads to an AWS S3 bucket.
How to Use:
- Option 1: Utilize an existing S3 bucket by providing your access key, secret key, bucket region, and name upon deployment to configure environment variables automatically.
- Option 2: Create a new S3 bucket following these steps:
  - Bootstrap the project using pnpm create next-app with the provided GitHub example link.
  - Set up a new S3 bucket with specific public access and ownership settings.
  - Create a new IAM user with direct policy attachments for necessary S3 permissions.
  - Save the access and secret keys from the newly created IAM user.
  - Configure an .env.local file with your AWS credentials and S3 bucket details, following the .env.example structure.
  - Set up CORS on your S3 bucket to allow uploads.
  - Run the application locally with pnpm dev or npm run dev, and test the upload functionality.
Credentials and Environment Variables:
- AWS credentials and region can be directly used as environment variables (e.g., AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_REGION), simplifying the AWS SDK usage.
Commands:
- pnpm dev or npm run dev to start the application locally.
Additional Resources:
- Documentation on AWS environment variables, using PresignedPost URLs, initializing S3Client, generating a presigned post, and setting AWS ACL permissions.