---
type: video
yt_id: VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLnQtbGhncTdOZnBj
videoId: t-lhgq7Nfpc
title: "Next-Level S3 File Management: The Ultimate Guide to Handling Files in Next.js 14"
date: "2023-11-14T14:00:42Z"
slug: "nextlevel-s3-file-management"
image: 
  name: "nextlevel-s3-file-management.jpg"
  alt: "Next-Level S3 File Management: The Ultimate Guide to Handling Files in Next.js 14"
  width: 1280
  height: 720
status: 'published'
description: "Use server actions to generate a signed url, then upload your image straight to s3 from the front-end to avoid overloading your serverless functions. "
tags: []
---

Use server actions to generate a signed url, then upload your image straight to s3 from the front-end to avoid overloading your serverless functions. 

This is a complete tutorial on how to use S3 to Get, Put, and Delete files in your Next.js 14 applications. I'll show you how to make this work with images and videos, but these techniques will work with any file type.

Code and references:  [https://www.nexttonone.lol/upload-s3](https://www.nexttonone.lol/upload-s3)

Join this channel to help me make more videos and get access to some videos early:
[https://www.youtube.com/channel/UC6aTLuI_j4-0wiDSzmaPctQ/join](https://www.youtube.com/channel/UC6aTLuI_j4-0wiDSzmaPctQ/join)

## Chapters:

* 0:00​ Intro
* 1:08 Referencing the file
* 2:31 File Preview
* 4:35 Create S3 Bucket
* 8:25 IAM Credentials
* 12:24 Next Server Action
* 15:28 Signed URL & Upload 
* 21:27 File Requirements & Restrictions
* 26:08 Unique File Names
* 28:45 Save to Database
* 42:51 SQL Queries 
* 44:19 Delete File
* 49:16 Summary