Uploading Files to Supabase Storage in Next.js: A Comprehensive Guide

Hey everyone! 👋 Ever wanted to seamlessly integrate file uploads into your Next.js application, making use of the robust storage capabilities offered by Supabase? Well, you’re in the right place! This guide is designed to walk you through the entire process, step-by-step, ensuring you can confidently upload files to Supabase Storage from your Next.js project. We’ll cover everything from setting up your Supabase project to handling file uploads on the client-side and server-side. Get ready to dive in and learn how to implement this powerful feature, making your web applications more versatile and user-friendly. Let’s get started and make your app even better! 😎

Setting Up Your Supabase Project

Alright, before we get our hands dirty with code, we need to set up our Supabase project. If you don’t already have a Supabase account, head over to Supabase and create one. It’s super easy, promise! 😉 Once you’re in, create a new project. Give it a cool name (like “my-nextjs-supabase-app”) and choose a region closest to your users for the best performance. Then, after the project is created, navigate to the “Storage” section from the dashboard. This is where the magic happens for storing our files. In the “Storage” section, you’ll need to create a new bucket. Think of a bucket as a folder where you’ll store your uploaded files. Give your bucket a descriptive name (e.g., “images”, “documents”).

Now, here’s a crucial step: setting the bucket’s permissions. Click on the bucket you just created, and then go to the “Public access” settings. You’ll likely want to set the bucket to public if you want anyone to be able to view the uploaded files (like images on a website). If you want more control (like requiring users to be logged in to view files), you can set it to private and manage access via Supabase’s authentication and policies. This is an important step, so don’t skip it! Make sure to take note of your Supabase project’s API URL and your public anon key. You’ll find these in the “Settings” -> “API” section of your Supabase dashboard. You’ll need these later to connect your Next.js application to your Supabase project. Also, the best practice is to store these keys securely using environment variables. That’s a wrap for setting up the Supabase side! Ready to jump into the code? Let’s go!

Setting Up Your Next.js Project

Let’s get our Next.js project up and running! If you don’t have a Next.js project yet, no worries, we’ll create one from scratch. Open up your terminal and run the following command to create a new Next.js project:

npx create-next-app@latest my-supabase-app

This command sets up a new Next.js project called my-supabase-app . Feel free to replace this with a name that fits your project. Next, navigate into your project directory:

cd my-supabase-app

Now, let’s install the necessary dependencies. We’ll need the @supabase/supabase-js library to interact with Supabase. Run the following command in your terminal:

npm install @supabase/supabase-js

This command installs the Supabase JavaScript client, which allows your Next.js application to communicate with your Supabase backend. Next, create a .env.local file in the root directory of your project. This is where you will store your Supabase project’s API URL and your public anon key. These are super sensitive pieces of information, so it’s important to keep them safe. Add the following lines to your .env.local file, replacing YOUR_SUPABASE_URL and YOUR_SUPABASE_ANON_KEY with your actual Supabase project credentials:

NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

Note that we’re prefixing the variables with NEXT_PUBLIC_ to make them accessible in the browser. This is essential for our client-side file upload functionality. Now that you have the project setup and the necessary dependencies installed, you’re ready to start building your file upload feature. Remember to keep those keys safe – never commit them directly to your repository! Now, let’s get into the fun part: writing the code! 🎉

Client-Side File Upload Implementation

Alright, time to get our hands dirty with the client-side code! This is where we create the user interface and handle the file selection and upload process. Let’s start by creating a simple component for uploading files. In your pages directory (or wherever you prefer to organize your components), create a new file named Upload.js (or a similar name). This component will include a file input field and a button to trigger the upload. Here’s a basic structure to get you started:

// pages/Upload.js
import { useState } from 'react';

function Upload() {
  const [file, setFile] = useState(null);
  const [uploading, setUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [uploadSuccess, setUploadSuccess] = useState(false);
  const [uploadError, setUploadError] = useState(null);

  const handleFileChange = (event) => {
    if (event.target.files && event.target.files[0]) {
      setFile(event.target.files[0]);
    }
  };

  const handleUpload = async () => {
    // Implementation will go here
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload} disabled={!file || uploading}>
        {uploading ? "Uploading..." : "Upload"}
      </button>
      {uploading && (
        <div>Upload Progress: {uploadProgress}%</div>
      )}
      {uploadSuccess && <p>File uploaded successfully!</p>}
      {uploadError && <p style={{ color: 'red' }}>Error: {uploadError}</p>}
    </div>
  );
}

export default Upload;

This component includes the state variables for the file, the upload status, and any potential errors. It also has an input field for selecting the file and a button to trigger the upload. Now, let’s add the logic to interact with Supabase. Inside the handleUpload function, we’ll use the @supabase/supabase-js library to upload the file to Supabase Storage. First, you need to import createClient from @supabase/supabase-js and initialize the Supabase client. You can initialize the client in a separate file (e.g., supabaseClient.js ) or directly within your component, like this:

// supabaseClient.js
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Now, back in your Upload.js file, import supabase and add the upload logic inside handleUpload :

import { useState } from 'react';
import { supabase } from '../supabaseClient'; // Adjust the path as needed

function Upload() {
    // ... (state variables and handleFileChange)

    const handleUpload = async () => {
        if (!file) return;
        setUploading(true);
        setUploadSuccess(false);
        setUploadError(null);
        setUploadProgress(0);

        try {
            const { data, error } = await supabase.storage
                .from('your-bucket-name') // Replace with your bucket name
                .upload(file.name, file, {
                    cacheControl: '3600', // Cache for 1 hour
                    upsert: false, // Don't replace if file exists
                    onUploadProgress: (progress) => {
                        setUploadProgress(progress.loaded / progress.total * 100);
                    }
                });

            if (error) {
                setUploadError(error.message);
                console.error('Error uploading file:', error);
            } else {
                setUploadSuccess(true);
                console.log('File uploaded successfully:', data);
            }
        } catch (err) {
            setUploadError(err.message);
            console.error('An unexpected error occurred:', err);
        } finally {
            setUploading(false);
        }
    };

    return (
        // ... (JSX for the component)
    );
}

export default Upload;

Make sure to replace `