> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://uploadcare.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://uploadcare.com/docs/_mcp/server.

# Next.js File Uploader

> Integrate Uploadcare File Uploader into Next.js using Web Components or the React adapter.

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](https://www.npmjs.com/package/@uploadcare/file-uploader)

### React adapter package

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

* Package: [@uploadcare/react-uploader](https://www.npmjs.com/package/@uploadcare/react-uploader)

## Examples

### Web Components

* [Source on GitHub](https://github.com/uploadcare/file-uploader-examples/tree/main/examples/next-uploader)

[![Play with CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/github/uploadcare/file-uploader-examples/tree/main/examples/next-uploader)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/uploadcare/file-uploader-examples/tree/main/examples/next-uploader)

### Next.js adapter

* [Source on GitHub](https://github.com/uploadcare/file-uploader-examples/tree/main/examples/next-uploader-adapter)

[![Play with CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/github/uploadcare/file-uploader-examples/tree/main/examples/next-uploader-adapter)

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/uploadcare/file-uploader-examples/tree/main/examples/next-uploader-adapter)

## Related File Uploader docs

* [Overview](/docs/file-uploader/)
* [Installation](/docs/file-uploader/installation/)
* [Configuration](/docs/file-uploader/configuration/)
* [Events](/docs/file-uploader/events/)
* [API](/docs/file-uploader/api/)
* [Styling](/docs/file-uploader/styling/)
* [Plugin API](/docs/file-uploader/plugins/)

## 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.

## Related Next.js guide

For image delivery optimization in Next.js, see:

* [Next.js Image Loader and Component](/docs/integrations/next-js/)