Nextjs

将 fal.ai 添加到您的 Next.js 应用程序

您将学习如何：

1. 安装 fal.ai 库
2. 添加服务器代理以保护您的凭据
3. 使用 SDXL 生成图像

先决条件

1. 拥有现有的 Next.js 应用程序或使用“npx create-next-app”创建一个新应用程序
2. 拥有 fal.ai 帐户
3. 拥有 API 密钥。您可以在此处创建一个（https://fal.ai/dashboard/keys）

1.安装 fal.ai 库

使用您最喜欢的包管理器，安装 @fal-ai/serverless-client 和 @fal-ai/serverless-proxy 库。

2.设置代理

代理将保护您的 API 密钥并防止其暴露给客户端。通常，应用程序实现必须自己处理该集成，但为了使集成尽可能顺利，我们提供了一个可与 Page Router 或 App Router 集成的嵌入式代理实现。

2.1.页面路由器

如果您使用的是页面路由器（即src/pages/_app.js），请在src/pages/api/fal/proxy.js（或 TypeScript 中的.ts）中创建一个 API 处理程序，然后重新导出内置代理处理程序：

2.2. 应用路由器

如果您使用的是应用路由器（即src/app/page.jsx），请在src/app/api/fal/proxy/route.js（或 TypeScript 中的.ts）中创建一个路由处理程序，然后重新导出路由处理程序：

2.3.设置 API 密钥

确保您的 API 密钥可用作环境变量。您可以在开发中设置 .env.local 文件，也可以在生产中设置托管提供商，例如 Vercel。

2.4. 自定义代理逻辑

应用程序通常在代理处理程序之前或之后执行自定义逻辑。例如，您可能希望向请求添加自定义标头，或记录请求和响应，或应用一些速率限制。好消息是，代理实现只是一个标准的 Next.js API/路由处理程序函数，这意味着您可以将它与其他处理程序组合在一起。

例如，假设您想要添加一些分析并对代理处理程序应用一些速率限制：

请注意，将转发到服务器的 URL 可用作名为x-fal-target-url的标头。另外，请记住，上面的示例只是一个例子，rateLimiter和analytics只是占位符。

上面的示例使用了应用程序路由器，但相同的逻辑可以应用于页面路由器及其“handler”函数。

3.配置客户端

在您的主文件（即src/pages/_app.jsx或src/app/page.jsx）上，配置客户端以使用代理：

4.生成图像

现在客户端已配置，您可以使用 fal.subscribe 生成图像并传递模型 ID 和输入参数：

有关此示例中使用的 SD 与 LoRA 的更多信息，请访问 fal.ai/models/sd-loras

下一步是什么？

图像生成只是您可以使用 fal 执行的众多酷炫操作之一。请确保：

• 在 github.com/fal-ai/serverless-js/apps/demo-nextjs-app-router 查看我们的演示应用程序
• 查看所有可用的 模型 API
• 在 无服务器函数简介 上了解如何编写自己的模型 API
• 在 服务函数 上阅读有关函数端点的更多信息
• 查看下一页以了解如何 将您的应用部署到 Vercel

上次更新于 2024 年 6 月 21 日