EdgeOne Pages Functions: Geolocation

A real-time geolocation detection application built with Next.js and EdgeOne Pages Functions. It automatically detects user location based on IP address and displays geographic information with a beautiful, responsive UI and dark mode support.

• 🌍 Real-time Geolocation - Detect user's city, region, country, latitude and longitude
• 🌐 ISP Information - Display Internet Service Provider and ASN
• 🔒 TLS Version - Show connection encryption details
• 🌐 Internationalization - Auto-detect language based on country (Chinese/English)
• 📱 Responsive Design - Optimized for mobile and desktop
• 🌙 Dark Mode - Support for light/dark theme switching
• 📊 Visit Analytics - Access data analysis via KV storage
• ⚡ Edge Computing - Millisecond response time via EdgeOne edge nodes

• Node.js 18+
• npm, yarn, pnpm, or bun

git clone https://github.com/your-username/geolocation.git
cd geolocation
npm install

npm run dev

Open http://localhost:3000 to view the application.

npm run build
npm run start

├── app/
│   ├── page.tsx          # Main page component
│   ├── layout.tsx        # Root layout
│   └── globals.css       # Global styles
├── components/
│   ├── AppleIcons.tsx    # SVG icon components
│   └── ThemeToggle.tsx   # Dark mode toggle component
├── functions/
│   ├── geo/index.ts      # /geo endpoint
│   ├── zh/index.ts       # /zh endpoint (Chinese)
│   └── headers/index.ts  # /headers endpoint
├── lib/
│   ├── utils.ts          # Utility functions
│   └── kv-storage.ts     # KV storage operations wrapper
├── types/
│   └── kv.d.ts           # TypeScript type definitions
└── package.json

• Framework: Next.js 14
• Styling: Tailwind CSS + shadcn/ui
• Edge Functions: EdgeOne Pages Functions
• Data Storage: EdgeOne Pages KV Storage
• Language: TypeScript

1. User visits the page
2. Request hits EdgeOne edge node
3. EdgeOne detects user's IP and resolves geolocation
4. Geo data is returned via response headers or JSON
5. Visit data is automatically saved to KV storage (30-day retention)
6. Frontend displays the information with i18n support

The project integrates EdgeOne Pages KV storage for visit data recording:

• Data Storage: Each visit is automatically saved to KV storage, including geolocation, IP, timestamp, etc.
• Auto Cleanup: Data older than 30 days is automatically cleaned up with 1% probability
• Configuration: Requires creating a Geolocation KV namespace in EdgeOne console and binding it to the project

For detailed configuration instructions, please refer to KV_STORAGE_README.md

ISC

• Live Demo
• EdgeOne Pages
• More Templates