Integrating File Uploads in Next.js 14

Next.js App Router and server-first uploads make a great pair: secrets stay on the server, the client just streams bytes, and React components stay type-safe. Here's a practical integration that handles auth, validation, progress UI, and post-upload actions without leaking keys.

1) Define a typed upload router

// app/api/upload/route.ts
import { fileRouter } from "@/server/uploadbird"; // your typed endpoints
import { handleUpload } from "uploadbird/next";

export const { GET, POST } = handleUpload({ router: fileRouter });

Keep the router close to your business logic. Middleware authenticates the user and adds metadata; onUploadComplete can write to your database or enqueue work.

2) Build a client-side picker

Use a client component to select files, show progress, and handle results. Request the upload URL from your API route so keys stay server-side.

"use client";
import { UploadButton } from "uploadbird/react";

export function AvatarUploader() {
  return (
    <UploadButton
      endpoint="avatarUploader"
      onClientUploadComplete={(files) => {
        // update profile with files[0].url
      }}
      onUploadError={(error) => {
        console.error(error);
      }}
    />
  );
}

3) Add UX polish

• Show progress per file; retry failures with backoff.
• Validate file type/size client-side to give instant feedback.
• Use skeletons or placeholders while uploads complete.

4) Post-upload actions

In onUploadComplete on the server, write records, kick off image/video processing, or notify downstream systems. Because auth ran before upload, you already know the user and can apply org- or role-based logic safely.

Why this pattern works

You keep secrets on the server, you get type-safe endpoints, and your client code is minimal. UploadBird handles the heavy lifting: resumable uploads, validation, scanning, signed URLs, and CDN delivery. You ship faster with fewer edge cases—and your Next.js app stays clean.