10分钟实现国家识别广告投放：Next.js + Cloudflare 最简方案

在最近的一次讨论中，哥飞提出了一个有趣的观点：仅依靠语言来判断用户所属国家存在较大局限性，这使得基于语言分类投放广告的策略并不够精准。恰好我在这个领域有一些实践经验，希望能和大家分享。

通过 Next.js 和 Cloudflare 的配合，我们可以轻松实现根据访问者国家展示不同广告内容的功能。这个方案简单可靠，无需额外服务。接下来，我将以俄罗斯用户为例，为您详细介绍如何在10分钟内快速搭建一个可靠的用户国家检测系统。

前提条件

要实现这个功能，你需要：

网站已经使用 Cloudflare CDN 服务
确保在 Cloudflare 仪表板中启用了 IP Geolocation （默认是开启的，没关闭过就不用操作）

工作原理

Cloudflare 会自动为每个请求添加 CF-IPCountry 头部信息，包含访问者的两字母国家代码。例如：

俄罗斯访问者：RU
中国访问者：CN
美国访问者：US

代码实现

1. 创建广告配置

// config/ads.ts
export const adConfig = {
    RU: {
        provider: 'yandex',
        slot: 'ru-123456',
        content: '俄罗斯市场广告内容'
    },
    CN: {
        provider: 'baidu',
        slot: 'cn-123456',
        content: '中国市场广告内容'
    },
    default: {
        provider: 'google',
        slot: 'global-123456',
        content: '全球市场广告内容'
    }
} as const

2. 创建广告组件

// components/GeoAd.tsx
'use client'

interface GeoAdProps {
    country: string
}

export default function GeoAd({ country }: GeoAdProps) {
    const adData = adConfig[country as keyof typeof adConfig] || adConfig.default
    
    return (
        <div className="ad-container">
            {adData.provider === 'google' && (
                <div id={`google-ad-${adData.slot}`}>
                    {adData.content}
                </div>
            )}
            {adData.provider === 'yandex' && (
                <div id={`yandex-ad-${adData.slot}`}>
                    {adData.content}
                </div>
            )}
            {adData.provider === 'baidu' && (
                <div id={`baidu-ad-${adData.slot}`}>
                    {adData.content}
                </div>
            )}
        </div>
    )
}

3. 在页面中使用

// app/page.tsx
import { headers } from 'next/headers'
import GeoAd from '@/components/GeoAd'

export default function Home() {
    const country = headers().get('cf-ipcountry') || 'default'
    
    return (
        <main>
            <h1>跟着哥飞搞流量</h1>
            <GeoAd country={country} />
        </main>
    )
}