Install

npm i @thefinder/next @thefinder/react

Setup in three files

// lib/finder.ts
import { createTheFinder, localDriver, uploadsDir } from "@thefinder/next";
import { sharpThumbnailer } from "@thefinder/core/sharp"; // sharp already ships with Next.js

export const finder = createTheFinder({
  volumes: [{ id: "uploads", name: "Uploads", driver: localDriver({ root: uploadsDir() }), url: "/uploads" }],
  thumbnails: { generator: sharpThumbnailer() },
});

// app/api/files/route.ts
import { createNextRoutes } from "@thefinder/next";
import { finder } from "@/lib/finder";

export const runtime = "nodejs";
export const { GET, POST } = createNextRoutes(finder);

// app/uploads/[...path]/route.ts
import { createUploadsRoute } from "@thefinder/next";

export const runtime = "nodejs";
export const { GET, HEAD } = createUploadsRoute();

Then render <TheFinder endpoint="/api/files" /> on any page.

Why it's standalone-ready

• uploadsDir() always points to <project root>/uploads, also inside a standalone build where server.js runs from .next/standalone. Override it with CI_FINDER_UPLOADS_DIR or CI_FINDER_ROOT.
• createUploadsRoute serves files uploaded after the build (unlike public/), with Range, ETag/304 and a sandbox CSP for HTML/SVG.
• Environment variables are read in a way that keeps Next's file tracer from copying your whole project (and its uploads) into the bundle.
• Thumbnails in standalone: file tracing does not pick up sharp's native libraries, so add them to next.config: outputFileTracingIncludes: { "/api/files": ["./node_modules/@img/**/*"] }. Without it the file manager still works and serves the original images instead of thumbnails.

Authorization

import { TheFinderError } from "@thefinder/next";

createTheFinder({
  volumes,
  authorize: async ({ request }) => {
    const session = await getSession(request);
    if (!session) throw new TheFinderError("UNAUTHORIZED"); // → 401
    if (session.role === "viewer") return { readOnly: true };
    return true;
  },
});

All theFinder packages

| Package | | |---|---| | @thefinder/core | Server engine, drivers, adapters, client | | @thefinder/react | The file manager UI and file picker | | @thefinder/next | Next.js routes, standalone-ready (this package) | | @thefinder/ckeditor | CKEditor 5 / 4 connector |

License

MIT © Alper Koşay