Next.js File Uploader

In Next.js, you can integrate Uploadcare File Uploader in two ways:

with Web Components (@uploadcare/file-uploader)
with the React adapter (@uploadcare/react-uploader)

When to choose each option

Web Components package

Choose this when you want direct uploader element/event/API access.

Package: @uploadcare/file-uploader

React adapter package

Choose this when you prefer React component APIs in Next.js pages/components.

Package: @uploadcare/react-uploader

Examples

Web Components

Source on GitHub

Next.js adapter

Source on GitHub

Notes and pitfalls

Place uploader integration code in client components.
If you add custom source plugins, initialize them in client runtime code.
Use public runtime variables (for example, NEXT_PUBLIC_*) for browser-side uploader config values.

For image delivery optimization in Next.js, see:

Next.js Image Loader and Component