如何在Nextjs 13中应用程序目录的服务器组件中获取客户端的IP地址？

Question

对于个人项目，我想创建一个游戏。因此，如果用户松动，他将在 30 分钟内无法访问游戏，无需注册或类似的操作，我只想将 IP 存储在数据库中，以便我可以检查用户上次松动的时间。 （我构建这个应用程序是为了提高我对 Nextjs 和 React 组件的了解）但事实是：我无法在包含我的游戏的服务器组件中访问客户端的 IP。

继续，如何在“app”目录内的服务器组件内获取客户端的 IP？

我必须在客户端组件内部进行 API 调用来获取 req 对象，然后获取 IP，但这个解决方案触发了我，因为它对于用户体验来说不是最佳的。

Answer 1

您可以使用 nextjs 中间件将主机提供的 IP 地址传递到通用标头。

之后，您将能够通过服务器组件中的标头访问 IP 地址。

这可能看起来像这样：

// middleware.ts
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  // Clone the request headers so that we don't modify the original headers object
  const requestHeaders = new Headers(request.headers);

  // Check if the hosting platform provides the client's IP address and store it in a variable
  const ip = request.ip || "";

  // Add the client's IP address to the request headers using the 'x-forwarded-for' field
  requestHeaders.set("x-forwarded-for", ip);

  // Return a new request object with the updated headers using NextResponse.next()
  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
}

// app/page.tsx

import { headers } from "next/headers";

export default function Home() {
  // Get the client's IP address from the request headers
  const ip = headers().get("x-forwarded-for");

  return (
    <main className={styles.main}>
      <div className={styles.description}>
        <p>
          IP Address:
          {` ${ip}` || " Not found"}
        </p>
        ...
      </div>
      ...
    </main>
  );
}

我在 Vercel 上部署了这个示例，它工作得很好，我希望它能帮助你:)

Answer 2

您也可以在不使用任何类型的中间件的情况下执行此操作。您需要做的就是确保该组件是服务器组件，仅此而已！这是示例代码：

首先导入标头

import { headers } from "next/headers";

现在使用它

const headersList = headers();
const ip = headersList.get("x-forwarded-for") || "121.0.0.1";

它无法在本地工作，这就是为什么我们将“121.0.0.1”分配给“ip”变量。

Answer 3

可以分享Github代码吗？此代码在我的电脑上不起作用。