Geocoding in React/Next.js applicaties

import { NextRequest, NextResponse } from 'next/server';

// Token caching (in productie: gebruik Redis of database)
let cachedToken: string | null = null;
let tokenExpiry = 0;

async function getToken(): Promise<string> {
  if (!cachedToken || Date.now() > tokenExpiry - 60000) {
    const res = await fetch('https://api.georex.nl/api/token', {
      method: 'POST',
      headers: { 'X-API-Key': process.env.GEOREX_API_KEY! }
    });
    const data = await res.json();
    cachedToken = data.token;
    tokenExpiry = Date.now() + (data.expires_in * 1000);
  }
  return cachedToken!;
}

export async function POST(request: NextRequest) {
  const { address } = await request.json();

  const token = await getToken();
  const query = encodeURIComponent(address);

  const res = await fetch(
    `https://api.georex.nl/geocode?q=${query}&token=${token}`
  );
  const data = await res.json();

  // GeoJSON naar frontend-friendly formaat
  if (data.features?.length > 0) {
    const feature = data.features[0];
    const [lon, lat] = feature.geometry.coordinates;
    return NextResponse.json({
      lat, lon,
      ...feature.properties
    });
  }

  return NextResponse.json({ error: 'Not found' }, { status: 404 });
}

import { useState, useCallback } from 'react';

interface GeocodeResult {
  lat: number;
  lon: number;
  street: string;
  housenumber: string;
  postcode: string;
  city: string;
}

export const useGeocode = () => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [result, setResult] = useState<GeocodeResult | null>(null);

  const geocode = useCallback(async (address: string) => {
    setLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/geocode', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ address })
      });

      if (!response.ok) {
        setError('Adres niet gevonden');
        return;
      }

      const data = await response.json();
      setResult(data);
    } catch (e) {
      setError('Netwerkfout');
    } finally {
      setLoading(false);
    }
  }, []);

  return { geocode, loading, error, result };
};