Boilerplate

A minimal boilerplate showing how to integrate react-image-crop with Next.js App Router to build a client-side image cropping flow. The example covers file upload, preview, crop interaction, and export (Blob/Base64) ready to send to any storage/API.

Features

• Next.js App Router with a simple upload → crop → confirm flow.
• react-image-crop for keyboard/mouse/touch cropping.
• Configurable aspect ratios (free, 1:1, 4:3, 16:9) and min/max constraints.
• High-quality canvas rendering to export the cropped region (Blob / base64).
• shadcn/ui components for a clean UI (buttons, dialog, input).
• TypeScript with strict types and utility helpers.

Use Case

Perfect for projects that need quick, client-only image cropping (avatars, thumbnails, banners) without setting up persistence. Plug your own storage (S3, Cloudinary, UploadThing, etc.) when you’re ready. 🚀