Uploading Files to Amazon S3 in a Next.js Application Using AWS SDK v3

In this tutorial, we will walk through how to upload files to Amazon S3 in a Next.js application using the AWS SDK for JavaScript (v3). We will ensure that the files are served securely over HTTPS using the appropriate URL format.

Prerequisites

Basic knowledge of Next.js
An AWS account
Node.js installed on your machine

Step 1: Set Up Your S3 Bucket

Create an S3 Bucket

Go to the AWS Management Console.
Navigate to the S3 service and create a new bucket.
Choose a unique name and a region closest to your users.
Set up the bucket to allow public read access for simplicity (you can refine the permissions later).

Set Bucket Policy and CORS

Bucket Policy

Add the following bucket policy to allow public read access:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/uploads/*"
    }
  ]
}

CORS Configuration

Configure your bucket with the following CORS rules:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

Step 2: Set Up AWS SDK v3

Install AWS SDK v3

In your Next.js project, install the required AWS SDK packages:

npm install @aws-sdk/client-s3 @aws-sdk/lib-storage

Step 3: Create an API Route for File Upload

Create an API route in your Next.js application to handle file uploads to S3.

Create `/src/app/api/upload/route.js`

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
import { Upload } from '@aws-sdk/lib-storage';

const s3Client = new S3Client({
  region: process.env.AWS_REGION,
  credentials: {
    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
  },
});

export async function POST(req) {
  try {
    const { file } = await req.json();
    const base64Data = Buffer.from(file.replace(/^data:image\/\w+;base64,/, ""), 'base64');
    const type = file.split(';')[0].split('/')[1];

    const params = {
      Bucket: process.env.AWS_BUCKET_NAME,
      Key: `uploads/${Date.now().toString()}.${type}`,
      Body: base64Data,
      ContentEncoding: 'base64',
      ContentType: `image/${type}`,
    };

    const upload = new Upload({
      client: s3Client,
      params: params,
    });

    const data = await upload.done();

    // Generate the URL in the desired format
    const url = `https://s3.amazonaws.com/${params.Bucket}/${params.Key}`;

    return new Response(JSON.stringify({ url: url }), {
      status: 200,
      headers: { 'Content-Type': 'application/json' },
    });
  } catch (error) {
    return new Response(JSON.stringify({ error: error.message }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' },
    });
  }
}

Step 4: Create a File Upload Component

Create a file upload component to allow users to upload files from the client-side.

Create `/src/components/FileUpload.js`

'use client';

import { useState } from 'react';

const FileUpload = () => {
  const [file, setFile] = useState(null);
  const [message, setMessage] = useState('');

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

  const handleSubmit = async (event) => {
    event.preventDefault();

    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = async () => {
      const base64data = reader.result;
      const response = await fetch('/api/upload', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ file: base64data }),
      });

      if (response.ok) {
        const data = await response.json();
        setMessage(`File uploaded successfully! File URL: ${data.url}`);
      } else {
        setMessage('File upload failed.');
      }
    };
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleChange} />
      <button type="submit">Upload</button>
      {message && <p>{message}</p>}
    </form>
  );
};

export default FileUpload;

Step 5: Use the Component in Your Page

Include the FileUpload component in one of your Next.js pages.

Create `/src/app/page.js`

import FileUpload from '../components/FileUpload';

export default function Home() {
  return (
    <div>
      <h1>Upload a File to S3</h1>
      <FileUpload />
    </div>
  );
}

Step 6: Configure Environment Variables

Ensure you have the necessary environment variables set up in your Next.js project. Create a .env.local file in the root of your project if it doesn't exist:

Create `.env.local`

AWS_ACCESS_KEY_ID=your-access-key-id
AWS_SECRET_ACCESS_KEY=your-secret-access-key
AWS_REGION=your-region
AWS_BUCKET_NAME=your-bucket-name

Replace your-access-key-id, your-secret-access-key, your-region, and your-bucket-name with the actual values from your AWS account.

Step 7: Restart Your Development Server

Make sure to restart your Next.js development server to apply the new environment variables.

Conclusion

By following these steps, you should be able to upload files from your Next.js application to an S3 bucket using the AWS SDK for JavaScript (v3). The files will be served securely via HTTPS using the correct URL format. Happy coding!