Тестування геолокаційного редиректу в Next.js за допомогою VPN

Сучасні веб-додатки часто підлаштовують контент під географічне положення користувача. Наприклад, міжнародні інтернет-магазини перенаправляють користувачів на мовні субдомени, а контент-платформи обмежують доступ до певних матеріалів згідно з регіональними ліцензіями.

У екосистемі Next.js для цього зазвичай використовують проміжне ПЗ (Middleware) на Edge-серверах (наприклад, Vercel Edge Network), які зчитують заголовки геолокації з запиту. Але як розробнику перевірити роботу цих редиректів на локальній машині чи стейджингу? Найефективніший спосіб — симулювати запити з різних країн за допомогою NordVPN.

---

Як Next.js визначає геолокацію?

Під час розгортання додатку на Vercel, платформа автоматично додає до кожного HTTP-запиту заголовки, що містять географічні дані, отримані на основі IP-адреси клієнта.

У файлі middleware.js ви можете зчитати ці дані за допомогою об'єкта request.geo:

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const { geo } = request;
  const country = geo?.country || 'US';
  const url = request.nextUrl.clone();

  // Якщо користувач з України, перенаправляємо на UA версію
  if (country === 'UA' && !url.pathname.startsWith('/ua')) {
    url.pathname = `/ua${url.pathname}`;
    return NextResponse.redirect(url);
  }

  // Для користувачів з Великобританії
  if (country === 'GB' && !url.pathname.startsWith('/uk')) {
    url.pathname = `/uk${url.pathname}`;
    return NextResponse.redirect(url);
  }

  return NextResponse.next();
}

---

Проблема локального тестування (localhost)

Коли ви запускаєте сервер розробки локально через npm run dev, об'єкт request.geo буде порожнім (undefined), оскільки запити надходять з локальної петлі 127.0.0.1.

Щоб протестувати middleware локально, розробники часто використовують два підходи:

1. Емуляція заголовків за допомогою плагінів для браузера (наприклад, ModHeader), додаючи заголовок x-vercel-ip-country.
2. Локальний запуск через проксі з використанням реальної IP-адреси.

Проте емуляція заголовків не гарантує, що додаток буде працювати так само у продакшні, оскільки реальні CDN-вузли Vercel Edge ігнорують або перезаписують надіслані користувачем заголовки клієнтських країн з міркувань безпеки.

---

Тестування реальних Edge-сценаріїв з NordVPN

Щоб перевірити, як працює редирект на реальному стейджинг-сервері (наприклад, staging.your-app.com на Vercel):

Крок 1. Підключення до потрібної країни

Якщо ви хочете перевірити редирект для користувачів з Великої Британії, відкрийте NordVPN та підключіться до сервера в UK:

nordvpn connect united_kingdom

Крок 2. Перевірка редиректу

1. Відкрийте браузер у режимі Інкогніто (це важливо, щоб уникнути впливу старих файлів cookie та кешованих редиректів 301/302).
2. Перейдіть на адресу вашого сайту: https://staging.your-app.com/.
3. Ви повинні миттєво побачити редирект на https://staging.your-app.com/uk/ відповідно до логіки вашого Middleware.

Крок 3. Зміна локації на Україну

Тепер перемкніться на український сервер NordVPN:

nordvpn connect ukraine

Очистіть сесію Інкогніто та знову перейдіть на головну сторінку. Сайт має перенаправити вас на /ua/.

---

Поради з тестування локалізації

• Очищайте кешування редиректів: Браузери агресивно кешують редиректи 301. Завжди використовуйте режим Інкогніто або тримайте вкладку Network з увімкненим прапорцем "Disable cache".
• Тестуйте мобільні пристрої: Ви можете використовувати функцію Meshnet від NordVPN, щоб зв'язати свій тестовий смартфон із робочим ПК та перевіряти відображення адаптивного мобільного інтерфейсу з різними IP. Детальніше дивіться у гайді про використання Meshnet для стейджингу.
• Додаткові інструменти: Якщо у вашому додатку використовуються картографічні сервіси Google, рекомендуємо ознайомитись із посібником з локалізації Google Maps API.