如何在Next.js 13中获取客户端的IP地址？

Question

我有一个 next.js 13 应用程序，想要添加 API 端点

/api/getIP

。

route.js

文件位于

/app/api/getIP/route.js

中。

我尝试了几种方法，但没有一种有效。我尝试使用

request-ip

来获取 IP，但它返回了

null

。

这是我的代码：

import { NextResponse } from "next/server";
import requestIp from "request-ip";

export async function GET(req) {
  const detectedIp = requestIp.getClientIp(req);
  const data = {
    ok: true,
    ip: detectedIp,
    userAgent: req.headers.get("user-agent"),
  };
  return new NextResponse(JSON.stringify(data, null, 2));
}

我访问时收到此回复：

{
    "ok": true,
    "ip": null,
    "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36"
}

Answer 1

由于您已经在使用 Next.js

app

路由器，我假设您在 Vercel 上托管。

如果是，Vercel 可以使用 Next.js 中间件提供这些信息。

ip：（字符串 || 未定义）- 具有请求的 IP 地址。此信息由您的托管平台提供。

https://nextjs.org/docs/pages/api-reference/functions/next-server#nextrequest

您可以在中间件中访问它，例如：

import { NextRequest, NextResponse } from 'next/server';

export async function middleware(req: NextRequest) {
  const { ip, nextUrl } = req;

  nextUrl.searchParams.set('clientIp', ip);

  return NextResponse.rewrite(nextUrl);
}

上面的代码将添加

clientIp

作为查询参数，然后将其传递给您的路由处理程序。

---

缺点是，它无法在您的本地环境和任何不提供此信息的托管平台中工作。