In this repository, is an example Next.js App Router project and AWS CDK stack that shows how to upload files (image in this example) to an AWS S3 bucket via presigned URLs generated on a router handler and display them on the browser.
Below are the packages used in the project to generaete the presigned URLs as well as handle the form logic and submission. Alongside these, we use Next.js 13 and React 18.
If you would like to run the project for yourself, you can clone the repository and run the following commands:
npm install(performed in both the root directory andcdkdirectory)cdk deploy(performed in thecdkdirectory)npm run dev(performed in the root directory)
You'll also need to configure the .env.local file which you can do by copying the .env.local.example file and renaming it to .env.local and filling in the values using the values outputted from the cdk deploy command.
If you would like to see the full written tutorial for this project, you can check out my blog post here.