Example Next.js app to upload photos to an S3 bucket.

Last update: Aug 4, 2022

Next.js + AWS S3 Upload

This is an example of a Next.js application allowing you to upload photos to an S3 bucket.

Getting Started

Option 1: Use an existing S3 bucket.

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

Deploy with Vercel

Option 2: Create an S3 bucket.

  1. Create a new IAM role with permission for AWSCloudFormationFullAccess and AmazonS3FullAccess.
  2. Save the access key and secret key.
  3. Install the AWS CLI and run aws configure.
  4. This will prompt you to enter the access key and secret key.
  5. Create an .env.local file similar to .env.example.
  6. Run cdk deploy to create an S3 bucket with the correct CORS settings.
  7. Visit your newly created S3 bucket and retrieve the name and region.
  8. Add the name and region to .env.local.
  9. Run yarn dev to start the Next app at localhost:3000.
  10. Choose a .png or .jpg file.
  11. You should see your file successfully uploaded to S3.

This example uses createPresignedPost instead of getSignedUrlPromise to allow setting max/min file sizes with content-length-range.

Commands

  • yarn dev – Starts the Next.js app at localhost:3000.
  • cdk deploy – Deploy this stack to your default AWS account/region
  • cdk diff – Compare deployed stack with current state
  • cdk synth – Emits the synthesized CloudFormation template

GitHub

https://github.com/leerob/nextjs-aws-s3
You might also like...

Expose top-level identifiers in Next.js app.js

recma-nextjs-static-props Generate getStaticProps exposing top level identifiers Installation npm install recma-nexjs-static-props Usage This plugin i

Aug 8, 2022

A Next.js app to help developers learn about Web 3 protocols

A Next.js app to help developers learn about Web 3 protocols

This Next.js app is designed to be used with the Figment Learn Pathways, to help developers learn about various blockchain protocols such as Solana, NEAR, Secret, Polygon and Polkadot!

Aug 6, 2022

This monorepo is a blank(ish) starter for an Expo + Next.js app

This monorepo is a blank(ish) starter for an Expo + Next.js app

Blank Solito Example Monorepo πŸ•΄ npx [email protected] my-solito-app πŸ‘Ύ View the website ⚑️ Instantly clone & deploy πŸ”¦ About This monorepo is

Jul 31, 2022

100 lines of code Hackernews reader (with the help of next.js).

About This is an isomorphic react app, displaying stories from hackernews made with super nice next.js. It's just about 100 lines of code. Nothing ser

May 31, 2022

Rauchg Blog - Blog built by a Next.js core maintainer.

blog This is the blog that powers rauchg.com, built on next.js and deployed to the cloud via Vercel. How to run First, install Vercel CLI. Development

Jul 30, 2022

πŸ“Ί Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

πŸ“Ί Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.

Dashboard Create your own team dashboard with custom widgets. Table of Contents Installation Server Development Production Docker Create a Dashboard A

Aug 2, 2022

πŸ¦… Gank api base β–³ next.js (react&ssr)

πŸ¦… Gank api base β–³ next.js (react&ssr)

Introduction next.js(react ssr repo) and gank api Features Use react SSR framework next.js UI ant design antd Mobile UI ant design antd-mobile Support

Jul 21, 2022

Next.js website to list DJ and other musical events

Next.js website to list DJ and other musical events

Next.js website for DJ Events. This is part of my Next.js course on Udemy

Jul 30, 2022

Amazon clone with Next JS

Amazon clone with Next JS

Amazon clone with Next JS

Apr 26, 2022
Comments
  • 1. CORS issues on formData post

    Hi there,

    First of all thanks for your example. It's really helpful.

    I'm always getting CORS issues for this piece of code:

        const upload = await fetch(url, {
          method: 'POST',
          body: formData,
        });
    

    Are there any specific nextJS settings I need to add for this to work? If i move this piece of code to pages/api everything works without errors. However the data gets submitted to my S3 bucket whilst throwing a CORS error.

    Any help on this?

    Thanks alot!

    Reviewed by Trennel at 2021-02-02 08:30
  • 2. Changing Content-Type of the image to be viewable, not forced to download

    What's the best way to make sure that the image uploaded to S3 is set to have a Content-Type of its image extension?

    At the moment, this will upload as binary/octet-stream, so browsers will not be able to display the image but will try to download instead.

    Reviewed by spsaucier-bakkt at 2021-01-27 03:32
  • 3. Compressed files don't get sent

    This works great but when I try to compress the image file using multiple compressing packages which simply turn the image file into another file image but compressed, I get a Bad Request back from S3.

    Reviewed by oelbaga at 2022-02-11 04:27
  • 4. feat: Define content type

    Related to #1

    The current example uploads all files as binary/octet-stream and it can't be interpretable by Image next.js component for example. And I'm sure it causes all sorts of other issues. This PR fixes this by declaring the Content-Type of the uploading file in the presigned URL

    Reviewed by baptisteArno at 2021-05-23 08:16
About A basic demo example for integrating between Appwrite & Next JS πŸ’™
About A basic demo example for integrating between Appwrite & Next JS πŸ’™

About A basic demo example for integrating between Appwrite & Next JS ??

Jul 11, 2022
Shopify NextJS App Example. No custom NextJS server needed

Shopify NextJS App Example An example app built with NextJS that can be setup an

Jul 26, 2022
Next.js ReCaptcha V3 - Straightforward solution for using ReCaptcha in your Next.js application

⭐ Next.js ReCaptcha V3 Straightforward solution for using ReCaptcha in your Next.js application. ??️ Tiny and Tree-Shakable ?? Written in TypeScript ?

Jun 18, 2022
[ARCHIVED] experimenting React + GraphQL + Next.js web app on the theme of mindfulness

Relate Relate brings together mindfulness communities, teachers and individuals. Read the article on Medium Made with ❀︎ by Sébastien Dubois Deprecati

May 19, 2022
200 lines realtime todos app powered by next.js, preact, jet, redux and now
200 lines realtime todos app powered by next.js, preact, jet, redux and now

next-todos About 200 lines isomorphic todos app powered by next.js, redux and Jet realtime. The todos are synced between browsers. The canonical TodoA

Apr 24, 2022
A sample Next.js app for showing off it's capabilities
A sample Next.js app for showing off it's capabilities

NextGram Sample next app that takes advantage of the routing capabilities. In particular, notice that the photo route can be attached to two distinct

Apr 10, 2022
:pencil: JsonPlaceholder sample app made with Next.js
:pencil: JsonPlaceholder sample app made with Next.js

What? Next JPH is an example app made with JsonPlaceholder api, using Next.js, styled-components, flow and jest. "JPH" is an acronym to JsonPlaceholde

Dec 22, 2021
A Quine of Next.js app

This is a Next.js project bootstrapped with create-next-app.

Jul 10, 2021
Next.JS App to convert currencies!
Next.JS App to convert currencies!

Next.JS App to convert currencies!

Nov 30, 2021
Todo list app made with next js, redux and react-beautiful-dnd
Todo list app made with next js, redux and react-beautiful-dnd

Nextodo Todo list app made with next js, redux and react-beautiful-dnd [ Live Demo ] Source code for the demo page can be found on the nextodo repo Co

Aug 1, 2022