Replace Vercel Blob with Google Cloud Storage
While vercel blob has very tight integration with NextJS, it is still in private beta. It is fairly expensive too. Storing files in your cloud storage gives you more flexibility and cost savings.
This tutorial explains how you can replace the Vercel Blob API with Google Cloud Storage API using the example of Vercel Multi-tenant Platform Starter Kit template. This template is often used by those who wish to create multi tenant applications using nextjs.
There are many templates provided by vercel that uses the blob storage. We take one of these as an example. Particularly we have picked their platforms starter kit template here.
We will not go into the process of creating a Google cloud project and downloading the google_credentials.json file. That tutorial can be found here.
Once you follow this process you will get a json file that contains everything to authenticate you with Google Cloud.
Copy the contents of this file and convert it into Base64 encoded string by pasting it here. Note that this file is sensitive so you should ideally covert it into base64 using some local tool that wont steal these credentials. But for simplicity I have given you this link.
Define an environment variable GOOGLE_CREDENTIALS and set its value to this base64 encoded string. If you are using Vercel then you can set this environment variable in your vercel dashboard.
Create a file "lib/gcs.ts" in your code and paste the following code.
You now have the basic API to upload a file to Google cloud and return a URL.
Now how your app uploads the file from browser to server is upto you. However for this particular example we have code that looks something like this.
You can simply replace thie code with
We have not implemented things like error handling, limits on upload size, file type checks etc. But this code should give you an idea of how simple this code is. Also, Vercel blob puts your files on a CDN. Google Storage too supports such feature and you should explore that more.
Please write to us on email@example.com if you have any concerns or if you want any consultation.