uploadthing-nextjs

Configure type-safe direct-to-storage file uploads for Next.js App Router.

2|Updated Feb 6, 2026
One-click install
npx skills add https://github.com/Flohhhhh/skills --skill uploadthing-nextjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: uploadthing-nextjs
Source: https://github.com/Flohhhhh/skills/tree/main/uploadthing-nextjs
Command: npx skills add https://github.com/Flohhhhh/skills --skill uploadthing-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This solution simplifies secure, type-safe direct-to-storage file uploads in Next.js applications, reducing boilerplate and errors.

Core Features & Use Cases

  • Type-safe file routing with per-route upload rules and middleware-driven authentication.
  • On-upload completion hooks to persist metadata and associate files with domain entities.
  • Server-side utilities (UTApi) for programmatic uploads, signed URLs, and admin tooling.

Quick Start

Install and wire UploadThing with a Next.js app router to enable direct-to-storage uploads.

Frequently Asked Questions about uploadthing-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up type-safe direct file uploads in Next.js App Router?

Type-safe direct file uploads in Next.js App Router are set up by defining a FileRouter schema, wiring route handlers, and applying middleware to enforce per-route upload rules and authentication.

Can I use middleware to authenticate direct-to-storage uploads in Next.js?

Yes, middleware-driven authentication can secure direct-to-storage uploads in Next.js by enforcing per-route upload rules within the FileRouter schema before files reach storage.

How do I store file metadata after a Next.js upload completes?

You store file metadata after a Next.js upload completes by using onUploadComplete hooks to persist data and associate uploaded files with domain entities.

What is the best way to generate signed URLs for uploaded files in a Next.js app?

The best way to generate signed URLs for uploaded files in a Next.js app is using server-side UTApi utilities to manage programmatic uploads and grant signed URL-based access.

Do I need a FileRouter schema to enforce per-route upload rules?

Yes, you need a FileRouter schema to enforce per-route upload rules because it defines the type-safe routing structure required to validate file uploads and apply middleware authentication.

Can I programmatically upload files server-side without a frontend form in Next.js?

Yes, you can programmatically upload files server-side without a frontend form in Next.js by using UTApi utilities to handle direct uploads and manage admin tooling.