Add fal image generation to Next.js with a secure server proxy

What you get

A Next.js App Router route that proxies fal requests, so your client code can generate FLUX images without exposing your API key.

Prerequisites

A Next.js app using the App Router
A fal API key

Steps

Install the client and the server proxy:

Shell

npm install @fal-ai/client @fal-ai/server-proxy

Add your key to .env.local:

Shell

FAL_KEY="key_id:key_secret"

Create the proxy route at src/app/api/fal/proxy/route.ts:

TypeScript

import { createRouteHandler } from "@fal-ai/server-proxy/nextjs";

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

Point the client at the proxy (e.g. at the top of your client component):

TypeScript

import { fal } from "@fal-ai/client";

fal.config({
  proxyUrl: "/api/fal/proxy",
});

Generate an image from a client component (e.g. in a button handler):

TypeScript

const result = await fal.subscribe("fal-ai/flux/dev", {
  input: {
    prompt,
    image_size: "square_hd",
  },
  pollInterval: 5000,
  logs: true,
  onQueueUpdate(update) {
    console.log("queue update", update);
  },
});

const imageUrl = result.data.images[0].url;

Test it

Run npm run dev, trigger the handler with a prompt, and render imageUrl in an <img>. In the browser Network tab, requests should go to /api/fal/proxy, never directly with your key.