Prompt zum Hinzufügen von Cloudflare R2 Datei-Upload zu Next.js

Copy-paste AI Prompt zum Hinzufügen von Cloudflare R2 presigned Upload-URLs zu einem Next.js App Router Projekt mit serverseitiger Validierung.

Geben Sie diesen Prompt Ihrem Agenten, um direkte Datei-Uploads zu R2 mittels presigned URLs zu implementieren – Geheimnisse bleiben serverseitig und vermeiden den häufigen Fehler, Dateibytes durch Ihren Next.js Server zu leiten.

Hauptprompt

You are working in a Next.js App Router project using TypeScript.

Task: add Cloudflare R2 file upload via presigned PUT URLs.

Requirements:
- Install `@aws-sdk/client-s3` and `@aws-sdk/s3-request-presigner` (R2 is S3-compatible).
- Create a Server Action in `src/lib/actions/get-upload-url.ts` that:
  - Accepts `{ filename: string; contentType: string; sizeBytes: number }`.
  - Validates: `sizeBytes` must be <= 10_485_760 (10 MB); `contentType` must start with `image/`.
  - Uses `PutObjectCommand` + `getSignedUrl` to generate a 60-second presigned URL.
  - Returns `{ uploadUrl: string; publicUrl: string; key: string }`.
- Store credentials in `.env`: `R2_ACCOUNT_ID`, `R2_ACCESS_KEY_ID`, `R2_SECRET_ACCESS_KEY`,
  `R2_BUCKET_NAME`, `R2_PUBLIC_URL`.
- Create a client component `src/components/FileUploader.tsx` that:
  - Renders a file `<input accept="image/*" />`.
  - On change: calls the Server Action to get the presigned URL, then does a `fetch` PUT directly
    to R2, then shows the `publicUrl` as a preview.
  - Shows upload progress via `XMLHttpRequest` `progress` events (not fetch, which lacks progress).
- Do not add any other dependencies. Do not modify `next.config.ts` unless required for image domains.

Stop and list all planned file changes before writing any code.

Implementierungshinweise

R2 verwendet das S3 SDK mit endpoint: https://<accountId>.r2.cloudflarestorage.com und region: 'auto'. Das Vergessen von region: 'auto' verursacht einen Signaturfehler.
Presigned URLs werden serverseitig generiert; der Client sieht niemals R2_SECRET_ACCESS_KEY.
Für öffentlichen Bucket-Zugriff schalten Sie den “Public access”-Schalter im Cloudflare Dashboard um und geben Sie die resultierende r2.dev-URL als R2_PUBLIC_URL an.

Erwartete Dateiänderungen

src/lib/actions/get-upload-url.ts      (new)
src/lib/r2.ts                          (new — S3Client singleton)
src/components/FileUploader.tsx        (new — Client Component)
.env.example                           (edited)
package.json                           (edited)
next.config.ts                         (edited — add r2.dev to images.remotePatterns)

Akzeptanzkriterien

Eine in FileUploader ausgewählte Datei löst einen Abruf der presigned URL aus und lädt dann direkt zu R2 hoch.
Dateien größer als 10 MB werden vor jeder Netzwerkanfrage abgelehnt.
Nicht-Bild MIME-Typen werden serverseitig abgelehnt und geben einen Fehler mit Status 400 zurück.
Die öffentliche URL-Vorschau rendert das hochgeladene Bild nach Abschluss des Uploads.

Testbefehle

bun run typecheck
bun run dev
# upload a PNG < 10 MB via the component and confirm it appears in R2 bucket
# attempt a 15 MB file and confirm rejection
# attempt a .pdf and confirm rejection

Häufige KI-Fehler

Setzen von region: 'us-east-1' anstelle von 'auto', was SignatureDoesNotMatch-Fehler verursacht.
Leiten der Dateibytes durch die Next.js Server Action anstatt direkt zu R2 zu laden.
Vergessen, 'use server' am Anfang der Action-Datei aufzurufen.
Verwenden von fetch für den Upload und Verlust von Fortschrittsereignissen.

Korrektur-Prompt

The upload fails with `SignatureDoesNotMatch` or the file routes through the server.
Fix in order:
1. In `src/lib/r2.ts`, set `region: 'auto'` and `endpoint: https://${R2_ACCOUNT_ID}.r2.cloudflarestorage.com`.
2. In `FileUploader.tsx`, use `XMLHttpRequest` with a `progress` event to PUT directly to the
   presigned URL — not fetch, and not a Server Action for the actual upload bytes.
Show corrected diff only.

Prompt zum Hinzufügen von Cloudflare R2 Datei-Upload