---
title: Next.js
description: Mount the Files gateway in the Next.js App Router. createRouteHandler returns { GET, POST, PUT }, and the same handler runs on Node and the Edge runtime.
---

`files-sdk/next` mounts a [`createFilesRouter`](/ui/server/gateway) in the Next.js App Router. `createRouteHandler` returns `{ GET, POST, PUT }` — `GET` serves downloads, `POST` the JSON verbs, and `PUT` the upload byte path. The handler is Web-native (`Request`/`Response`, `crypto.subtle`, `ReadableStream`), so the same route runs on **Node and the Edge runtime**.

```ts title="app/api/files/route.ts" lineNumbers
import { createFiles } from "files-sdk";
import { s3 } from "files-sdk/s3";
import { createFilesRouter } from "files-sdk/api";
import { createRouteHandler } from "files-sdk/next";

const router = createFilesRouter({
  files: createFiles({ adapter: s3({ bucket: "uploads" }) }),
  allowedOrigins: ["https://app.example.com"],
  authorize: async ({ req }) => {
    /* throw to deny, or return a per-user constraint — see /ui/server/authorization */
  },
});

export const { GET, POST, PUT } = createRouteHandler(router);
```

That one route backs every client binding — the [React hook](/ui/client/react), [Svelte](/ui/client/svelte), and [Vue](/ui/client/vue). See the [gateway options](/ui/server/gateway) for the full configuration, and lock it down with [`authorize`](/ui/server/authorization) before shipping.