Hyperliquid聪明钱追踪器

用“AI 提示词 + Lovable.dev 一键发布”，零基础也能在 5 分钟内搭建一个基于 Next.js（App Router）与 Tailwind CSS 的 Hyperliquid 聪明钱追踪器。核心思路是用 Next.js 服务端代理 Nansen API，前端只调用你的内部 API，避免 CORS 与密钥泄露。

页面效果

✅ 最终成果：https://nansen.lovable.app/

Hyperliquid 聪明钱追踪器页面效果
示例：过去 24 小时聪明钱排行榜与总览指标

MVP 功能介绍

展示过去 24 小时在 Hyperliquid 上最赚钱的聪明钱地址榜单
支持过滤“Smart Money”相关标签（如 Fund / Smart Trader / Smart LP）
显示关键指标：24H 盈亏（USD）、ROI（%）、账户市值（USD）等
顶部总览卡片：地址数量、总盈利、平均盈利、总账户市值
一键刷新数据，保持近实时更新

AI 提示词（复制粘贴即可）

---- 提示词开始 ---
请帮我开发一个基于 Next.js (App Router) 和 Tailwind CSS 的 "Hyperliquid 聪明钱追踪器"。

### 核心功能
通过调用 Nansen API，寻找并展示过去 24 小时内，在 Hyperliquid 平台上最赚钱的“聪明钱”地址。

### 技术架构要求 (至关重要)
1. 必须解决跨域问题 (CORS)：
   - 严禁在前端直接调用 Nansen API。
   - 请创建一个 Next.js API Route (例如 `/api/smart-money`) 作为代理服务器。
   - 前端请求这个内部 API，由内部 API 在服务端向 Nansen 发起请求。
2. 日期自动处理：
   - API 请求体中的 `from` 和 `to` 字段，请根据当前时间自动计算，设置为“最近 24 小时”。不要写死日期。

### API 接口参考

后端代理应参考以下 curl 逻辑（注意替换 Key 为环境变量）：
curl -X POST "https://api.nansen.ai/api/v1/perp-leaderboard" \
  -H "apiKey: $NANSEN_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "date": { "from": "YYYY-MM-DD", "to": "YYYY-MM-DD" },
    "filters": {
      "total_pnl": { "min": 1000 },
      "include_smart_money_labels": ["Fund", "Smart Trader", "Smart LP"]
    },
    "pagination": { "page": 1, "per_page": 50 },
    "order_by": [{ "field": "total_pnl", "direction": "DESC" }]
  }'

Nansen API Key 请通过环境变量注入（变量名建议：`NANSEN_API_KEY`）。额度用完需自行订阅 Nansen：<https://nsn.ai/7LOuQVx1Jvh>
---- 提示词结束 ---

项目结构与关键代码

服务端代理（避免 CORS 与密钥外泄）

app/api/smart-money/route.ts

import { NextResponse } from 'next/server'

function formatDate(d: Date) {
  const y = d.getUTCFullYear()
  const m = String(d.getUTCMonth() + 1).padStart(2, '0')
  const day = String(d.getUTCDate()).padStart(2, '0')
  return `${y}-${m}-${day}`
}

export async function GET() {
  const now = new Date()
  const fromDate = new Date(now.getTime() - 24 * 60 * 60 * 1000)
  const body = {
    date: { from: formatDate(fromDate), to: formatDate(now) },
    filters: {
      total_pnl: { min: 1000 },
      include_smart_money_labels: ['Fund', 'Smart Trader', 'Smart LP'],
    },
    pagination: { page: 1, per_page: 50 },
    order_by: [{ field: 'total_pnl', direction: 'DESC' }],
  }

  const apiKey = process.env.NANSEN_API_KEY
  if (!apiKey) return NextResponse.json({ error: 'Missing NANSEN_API_KEY' }, { status: 500 })

  const res = await fetch('https://api.nansen.ai/api/v1/perp-leaderboard', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', apiKey },
    body: JSON.stringify(body),
  })

  if (!res.ok) {
    const text = await res.text()
    return NextResponse.json({ error: text || res.statusText }, { status: res.status })
  }

  const data = await res.json()
  return NextResponse.json(data)
}

页面展示（Tailwind 表格）

app/page.tsx

export default async function Page() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL || ''}/api/smart-money`, { cache: 'no-store' })
  const data = await res.json()
  const items = Array.isArray(data?.items) ? data.items : []

  return (
    <main className="mx-auto max-w-5xl px-6 py-10 text-white">
      <h1 className="text-2xl font-bold">Hyperliquid 聪明钱追踪器</h1>
      <p className="mt-2 text-sm text-blue-200">追踪过去 24 小时最赚钱的聪明钱地址</p>

      <div className="mt-6 overflow-x-auto">
        <table className="min-w-full divide-y divide-blue-700">
          <thead>
            <tr className="text-left text-blue-200">
              <th className="py-2">地址</th>
              <th className="py-2">标签</th>
              <th className="py-2">24H 盈亏</th>
              <th className="py-2">ROI</th>
              <th className="py-2">账户市值</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-blue-800">
            {items.map((it: any, i: number) => (
              <tr key={i}>
                <td className="py-2 font-mono">{it.address || it.trader_address}</td>
                <td className="py-2">{Array.isArray(it.labels) ? it.labels.join(', ') : ''}</td>
                <td className="py-2">{it.pnl_24h_usd || it.total_pnl}</td>
                <td className="py-2">{it.roi_percent || it.roi}</td>
                <td className="py-2">{it.position_value_usd || it.account_value_usd}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </main>
  )
}

环境变量

.env.local

NANSEN_API_KEY=你的_Nansen_API_Key
NEXT_PUBLIC_BASE_URL=

API Key 管理界面

在 Lovable.dev 一键发布

打开 https://lovable.dev
新建项目，选择 Next.js + Tailwind 模板或直接粘贴上面的“AI 提示词”生成代码
在“Environment Variables”中新增 NANSEN_API_KEY
右上角点击“Publish”，获得公开地址（如 nansen.lovable.app）

发布界面

参考与成果

Nansen API 文档：https://docs.nansen.ai/api/hyperliquid-apis/perp-pnl-leaderboard
测试你是否正确设置了密钥：直接访问 API 会报错“无 API Key”（示例：https://api.nansen.ai/api/v1/perp-leaderboard）
最终成果示例：https://nansen.lovable.app/
订阅与积分福利：https://nsn.ai/7LOuQVx1Jvh

注意事项

不要在前端直接调用 Nansen API；务必通过 Next.js API Route 代理
不要将密钥硬编码到代码仓库；只使用环境变量注入
若响应字段与示例略有差异，请按返回 JSON 字段名调整表格映射

Hyperliquid聪明钱追踪器

页面效果​

✅ 最终成果：https://nansen.lovable.app/​

MVP 功能介绍​

AI 提示词（复制粘贴即可）​

项目结构与关键代码​

服务端代理（避免 CORS 与密钥外泄）​

页面展示（Tailwind 表格）​

环境变量​

API Key 管理界面​

在 Lovable.dev 一键发布​

发布界面​

参考与成果​

注意事项​