求助：基于Next.js+Frog的Farcaster Frame部署Vercel受阻

一、核对基础配置文件 #

1. package.json #

确保scripts和依赖配置符合Next.js + Frog的要求，示例如下：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@frog-framework/next": "^latest",
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.0.0",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "typescript": "^5.0.0"
  }
}

注意：必须安装@frog-framework/next作为Next.js集成包，避免版本不兼容问题。

2. tsconfig.json #

确保基础配置通过TypeScript类型检查，示例如下：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{"name": "next"}]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

3. vercel.json #

若无特殊路由需求，保持默认即可；若需配置Frame响应头，可添加：

{
  "headers": [
    {
      "source": "/api/frame",
      "headers": [{"key": "Content-Type", "value": "text/html; charset=utf-8"}]
    }
  ]
}

二、核心Frame代码验证 #

将Frame代码放在app/api/frame/route.ts（Next.js + Frog标准路径），以下是适配你的需求的最简示例：

import { Frog } from '@frog-framework/next'

const frog = new Frog()

// 处理GET请求，返回初始Frame
export const GET = frog.frame(async (c) => {
  return c.res({
    image: 'https://your-image-url.com/placeholder.png', // 替换为你的图片地址
    buttons: [
      { label: '网站1', action: 'link', target: 'https://site1.com' },
      { label: '网站2', action: 'link', target: 'https://site2.com' },
      { label: '网站3', action: 'link', target: 'https://site3.com' }
    ]
  })
})

// 处理POST请求，按钮点击后返回原Frame（link类型无需额外逻辑）
export const POST = frog.frame(async (c) => {
  return c.res({
    image: 'https://your-image-url.com/placeholder.png',
    buttons: [
      { label: '网站1', action: 'link', target: 'https://site1.com' },
      { label: '网站2', action: 'link', target: 'https://site2.com' },
      { label: '网站3', action: 'link', target: 'https://site3.com' }
    ]
  })
})

注意：必须同时实现GET和POST方法，否则部署后会出现请求错误。

三、Vercel部署步骤确认 #

1. 将代码推送到GitHub/GitLab仓库
2. 在Vercel控制台导入仓库，框架预设选择Next.js
3. 构建配置保持默认：
   • Build Command: next build
   • Output Directory: .next
4. 点击Deploy等待完成

四、常见错误排查 #

• 构建失败：先在本地执行npm install和npm run build，确认本地能正常构建后再部署，查看Vercel构建日志定位具体错误（如依赖缺失、语法错误）。
• Frame不显示：部署完成后，用Farcaster的Frame验证工具检查/api/frame路径，确认返回的HTML包含正确的meta标签（Frog会自动生成）。
• 按钮跳转无效：确保按钮的action设为link，target是完整的HTTP/HTTPS链接。

内容的提问来源于stack exchange，提问作者user26561959