NextJS Upload to Google Cloud Using Signed URL

Learn how to upload files to Google Cloud Storage in NextJS using a Signed URL. Signed URL's are a great option for granting temporary permission to users, or for uploading larger files.
In this demo I get the Signed URL using a server action.
I also cover how to create the service account and add the JSON Key to the project, as well as how to configure the CORS setting on your Google Cloud Storage bucket.
Google Cloud docs on uploading using Signed URLs:
cloud.google.c...
Google Cloud docs on setting up CORS config:
cloud.google.c...
Github link for code from video:
github.com/Scr...
Follow me on social media!
Instagram: / scriptbytes
Threads: www.threads.ne...
Check out my blog!
scriptbytes.io/

[@florisalexandrou1095]

I tried to do it with the same approach using supabase and was getting a react hydration error, I actually needed to add the 'use server' directive. Uploading with signed URLs is honestly underrated, couldn't find any official docs to show how to do it in NextJS. Thanks for saving me hours of headaches :D!

[@scriptbytes]

I’m glad I could help!

[@ehtz8019]

Hi could you please share the code for that :) @florisalexandrou1095

[@alir8zana635]

your channel is really great I was looking for several videos and your channel came up keep up the great work the community appreciates your work greatly

[@scriptbytes]

This is one of the nicest comments I think I’ve ever got. I appreciate it. Thank you.

[@bdthombre]

It's really nice channel..keep doing the great work...someday soon it will burst open the subscribers flow...

[@scriptbytes]

Thanks, I hope so too!

[@BleedingDev]

Awesome, I was looking for this, thank you very much!

[@scriptbytes]

Glad I could help!

[@SEV-sm3wg]

Thanks for the amazing content! In your opinion, if I'm building a social media website with users who are uploading images and photos, is my understanding correct that I should use the Signed URL way instead of the way listed in your other NextJS Google Cloud video because my users will ordinarily NOT HAVE permission to write to the bucket?

[@scriptbytes]

Each way has pros and cons. Signed URL reduces stress on your server, however it turns it into a 2-step process. 1. Info is submitted, url is returned, 2. image is uploaded. The extra step allows for a failure. Server action allows you to do it all in one step/transaction, but requires more server resources. Also makes you have to increase the server action size limit. Another option is instead of a server action, make an api endpoint to accept media and any other info (tweet/comment for example). This would still take server resources like the server action, but with out the size limitations. So basically...it depends :)