⚡️ Implement AWS S3 In Your Next.js App In Under 5 Minutes

👩‍💻 Demo   •   🦾 Examples  •   🕸️ Website   •   🤝 Contribute

Netrunner is a batteries included tool to implement secure AWS storage in Next.js apps. Unlike other tools, it also solves the problem of configuring S3 buckets in your AWS account. Here's how it works:

1. view the example repositories for both app-and-pages router
2. create an S3 bucket in the Netrunner dashboard: https://netrunnerhq.com/
3. copy the template .env file in your terminal: cp .env.template .env.local and paste your S3 bucket name and env variables
4. run pnpm dev and upload a file!

🪄 Get started with Next.js and AWS S3 file uploads

Make sure you have a Next.js app and AWS account at the ready. Let's get started!

🔋 Step 1. Package installation

First install the Netrunner npm package to handle file uploads.

npm install @netrunner/next-s3

yarn add @netrunner/next-s3

pnpm add @netrunner/nextjs-s3

🌱 Step 2. Implement file upload component

When using app router:

// app/upload-page.tsx or for page router: pages/upload-page.tsx
import { useFileUpload } from "netrunnerhq/next-s3-upload";

export default function UploadComponent() {
  const { FileUploadInput, uploadFile } = useFileUpload();
  return <FileUploadInput handleUpload={uploadFile} />;
}

🔌 Step 3. Create a new API route

// app/upload/route.ts or for page router: pages/api/upload.ts
import { apiSignS3Url } from "@netrunnerhq/client";

export default async function handler(req, res) {
  if (req.method !== "GET")
    // different res for app router
    return res.status(405).json({ message: "Method not allowed" });

  if (!req.query.filename || !req.query.filetype)
    return res.status(400).json({ message: "Missing filename or filetype" });

  try {
    const { filename, filetype } = req.query;
    const { signed_url } = await apiSignS3Url(filename, filetype);
    res.status(200).json({ signed_url });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "An error occurred" });
  }
}

🪣 Step 4. Bucket configuration

• Create an S3 bucket inside your AWS account from the Netrunner app by logging in with GitHub and following the quickstart on netrunnerhq.com

• Enter your AWS account ID that you can find on the right top of the AWS console

• Verify in your AWS console if the bucket is deployed correctly in the S3 service page

🎉 Step 5. Environment variables and upload file!

• Add the environment variables to your .env.local file for the bucket name and region. You can copy them from the Netrunner console.

• Run your app and or use the example code in this repository if convenient.

• Click the upload button to select a test image. The file should upload correctly!

🦾 About Netrunner

Netrunner is being developed by Vincent Hus with the mission to enable JavaScript software engineers to transform their AWS cloud account into a personalised Firebase developer platform.

You can learn more by visiting our website or ping Vincent on twitter @jvf_hus