如何在Next.js中获取IP地理位置数据

网站可以利用IP地理定位为网站用户提供各种功能。这些功能包括根据国家进行网页重定向、以本地语言显示内容，或者根据用户的地理位置定制内容。

React是一个开源的JavaScript库，它使得网页开发人员可以基于组件轻松创建引人入胜的用户界面。它被设计为在前端（客户端）运行，这意味着它只能在浏览器端渲染页面。

与此同时，Next.js是由Vercel开发的开源React Web开发框架。Next.js使得React Web应用程序可以执行服务器端渲染、代码拆分等功能。该框架由Node.js提供支持，Node.js提供了JavaScript运行环境。

在本教程中，我将介绍如何使用React和Next.js搭建一个基本的网站。然后，我将演示如何通过检查访问者的IP地址来获取IP地理定位数据。这涉及与IP2Location.io进行简单集成，这是IP2Location.com提供的IP地理定位数据的下一代API。

我将使用Debian 12实例进行演示。

先决条件：IP2Location.io免费API密钥。请记下您的API密钥，它将在下面的步骤中使用。

1. 安装Node.js

在撰写本文时，Next.js所需的最低Node.js版本为18或更高。请参考next.js设置以了解最新所需版本。

按照您的平台在node.js上安装。

对于Debian，请使用以下命令进行安装：

sudo apt install nodejs npm

安装完成后，请验证两者的版本。

nodejs --version && npm --version

好的，我的版本符合要求。接下来，让我们进入下一步。

2. 创建基本的Next.js应用程序

使用下面的命令行自动生成基本的Next.js应用程序，基于默认模板。导航到您想要创建应用程序的文件夹，然后运行以下命令。

npx create-next-app@latest

我将使用默认项目名称“my-app”，并且不会在此演示中使用TypeScript。选择ESLint为Yes，Tailwind为No，src director为No，App Router为No，import alias为No。

运行上述命令后，您应该看到名为“my-app”的文件夹已经创建，并且包含了默认模板的骨架代码。让我们进入“my-app”文件夹，看看创建了哪些文件和文件夹。

查看package.json文件，您会发现它已自动包含了与React和Next.js一起使用所需的依赖项。

3. 安装IP2Location.io Node.js SDK

运行以下命令以安装IP2Location.io Node.js SDK。

npm install ip2location-io-nodejs

运行上述命令后，您会看到package.json已更新，包含了IP2Location.io Node.js SDK。

4. 修改Pages文件夹中的Index.js以添加IP2Location.io代码

导航到pages文件夹，让我们使用文本编辑器查看index.js文件。我假设您已经熟悉React，因此我在这里不会涵盖它。

现在，让我们用下面的代码替换整个页面，以简化演示目的的页面。在粘贴下面的简化代码后保存页面。

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import ip2locationio from 'ip2location-io-nodejs'

const inter = Inter({ subsets: ['latin'] })

export async function getServerSideProps(context) {
  let ip
  const { req } = context

  if (req.headers['x-forwarded-for']) {
	ip = req.headers['x-forwarded-for'].split(',')[0]
  } else if (req.headers['x-real-ip']) {
	ip = req.connection.remoteAddress
  } else {
	ip = req.connection.remoteAddress
  }

  // Configures IP2Location.io API key
  let mykey = 'YOUR_API_KEY'
  let config = new ip2locationio.Configuration(mykey)
  let ipl = new ip2locationio.IPGeolocation(config)
  let lang = 'fr' // translation language, only supported in Plus and Security plans so use blank if not needed

  // Lookup ip address geolocation data
  const ipldata = await ipl.lookup(ip, lang)
  return { props: { ipldata: ipldata } }
}

export default function Home({ ipldata }) {
  return (
	<>
  	<Head>
    	<title>Create Next App</title>
    	<meta name="description" content="Generated by create next app" />
    	<meta name="viewport" content="width=device-width, initial-scale=1" />
    	<link rel="icon" href="/favicon.ico" />
  	</Head>
  	<main className={`${styles.main} ${inter.className}`}>
    	<div className={styles.description}>
      	IP: {ipldata.ip} <br />
      	Country: {ipldata.country_name} ({ipldata.country_code}) <br />
      	Country translation: {ipldata.country.translation.value} ({ipldata.country.translation.lang}) <br />
      	Region: {ipldata.region_name} <br />
      	City: {ipldata.city_name} <br />
      	Latitude: {ipldata.latitude} <br />
      	Longitude: {ipldata.longitude} <br />
      	Continent: {ipldata.continent.name} <br />
      	Continent translation: {ipldata.continent.translation.value} ({ipldata.continent.translation.lang}) <br />
    	</div>
  	</main>
	</>
  )
}

现在，让我们分解一下将允许我们检索网站访问者IP地址的IP地理位置的重要部分。

首先，我们需要导入IP2Location.io Node.js SDK，以便我们可以使用它的功能。

import ip2locationio from 'ip2location-io-nodejs'

接下来，添加另一个名为“getServerSideProps”的函数，这是一个Next.js函数，允许我们在每次页面请求时设置动态属性。在这里，我们检索调用者的IP地址，并将其传递给IP2Location.io API以获取地理位置数据。

export async function getServerSideProps(context) {
  let ip
  const { req } = context

  if (req.headers['x-forwarded-for']) {
	ip = req.headers['x-forwarded-for'].split(',')[0]
  } else if (req.headers['x-real-ip']) {
	ip = req.connection.remoteAddress
  } else {
	ip = req.connection.remoteAddress
  }

  // Configures IP2Location.io API key
  let mykey = 'YOUR_API_KEY'
  let config = new ip2locationio.Configuration(mykey)
  let ipl = new ip2locationio.IPGeolocation(config)
  let lang = 'fr' // translation language, only supported in Plus and Security plans so use blank if not needed

  // Lookup ip address geolocation data
  const ipldata = await ipl.lookup(ip, lang)
  return { props: { ipldata: ipldata } }
}

最后，我们可以在Home函数中使用我们上面设置的属性，该函数将渲染我们的索引页面。我们将ipldata传递给函数，然后IP地理位置字段如country_code、country_name、region_name和其他字段将被显示。

export default function Home({ ipldata }) {
  return (
	<>
  	<Head>
    	<title>Create Next App</title>
    	<meta name="description" content="Generated by create next app" />
    	<meta name="viewport" content="width=device-width, initial-scale=1" />
    	<link rel="icon" href="/favicon.ico" />
  	</Head>
  	<main className={`${styles.main} ${inter.className}`}>
    	<div className={styles.description}>
      	IP: {ipldata.ip} <br />
      	Country: {ipldata.country_name} ({ipldata.country_code}) <br />
      	Country translation: {ipldata.country.translation.value} ({ipldata.country.translation.lang}) <br />
      	Region: {ipldata.region_name} <br />
      	City: {ipldata.city_name} <br />
      	Latitude: {ipldata.latitude} <br />
      	Longitude: {ipldata.longitude} <br />
      	Continent: {ipldata.continent.name} <br />
      	Continent translation: {ipldata.continent.translation.value} ({ipldata.continent.translation.lang}) <br />
    	</div>
  	</main>
	</>
  )
}