leerob / nextjs-gcp-storage

Example Next.js app to upload photos to a GCP storage bucket.

Next.js + GCP Storage Upload

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

Getting Started

Option 1: Use an existing storage bucket.

Retrieve your existing project ID, bucket name, and service account email and private key. Provide those values after clicking "Deploy" to automatically set the environment variables.

Option 2: Create a new bucket.

1. Download the Google Cloud SDK so you can use the gcloud CLI.
2. Run gcloud auth login.
3. Inside Google Cloud, create a new project nextjs-storage-bucket.
4. Run gcloud config set project nextjs-storage-bucket.
5. Run gcloud auth application-default login, per setup instructions.
6. Run pulumi up to deploy your bucket (it will prompt you to log in).
7. View your newly created bucket and add the bucket name to .env.local (see .env.example).
8. Create a new service account with a role of Storage Object Creator.
9. Click "Create Key" and save the JSON file.
10. Add the project_id, client_email, and private_key to .env.local (see .env.example).
11. Run yarn dev to start the Next app at localhost:3000.
12. Choose a .png or .jpg file.
13. You should see your file successfully uploaded to the bucket.

Commands

• yarn dev – Starts the Next.js app at localhost:3000.
• pulumi up – Deploy this stack to GCP.